Question

我用一个组件和一个服务开发了Angular库，我在Angular Application中使用了该库，但是如何使用来自已消耗Angular APP的库Service来渲染该库组件呢？

有可能还是有更好的方法？

Answer 1

以下是您的一些想法...

from array import *

print("First array: ")

a = int(input("No. of rows: "))
b = int(input("No. of columns: "))

print("Second array")

x = int(input("No. of rows: "))
y = int(input("No. of columns: "))

if(b == x):    #Checking if multiplication is possible or not

    array1 = array('i', [])
    array2 = array('i', [])

    #1st array
    for i in range(0,a):
        for j in range(0,b):
            n1 = int(input("Enter values for first array: "))
            array1[i][j].append(n1)

     print(array1)

     #2nd array  
     for i in range(0,x):
            for j in range(0,y):
                n2 = int(input("Enter values for first array: "))
                array2[i][j].append(n2)

     print(array2)

然后，您可以像...那样致电服务

import { Injectable, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

@Injectable()
export class ComponentResolverService {

  constructor(private resolver: ComponentFactoryResolver){}

  create(cmp){
    // cmp is an actual reference to component like MyNewComponent.
    return this.resolver.resolveComponentFactory<any>(cmp);
  }
}

或者您可以拥有键/值对对类似组件的引用...

// Pass in the imported reference of the component.
this.componentResolverService.create(MyNewComponent);

然后，您可以像这样基于字符串来构建组件...

import { MyNewComponent, AnotherOneComponent } from './components';

export const registry = { // This could be a service or whatever
  "myCmp": MyNewComponent,
  "anotherOne: AnotherOneComponent
};
// Now we can just look up each reference using a string, instead of importing all the components.

解析完组件后，必须像这样将其添加到视图中……

import { Injectable, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { RegistryService } from './where-ever-registry-lives';

@Injectable()
export class ComponentResolverService {

  constructor(
    private resolver: ComponentFactoryResolver,
    private registry: RegistryService
  ){}

  create(cmpString){
    return this.resolver.resolveComponentFactory<any>(this.registry[cmpString]);
  }
}

或者您也可以像这样创建一条指令来完成所有操作……

// Inside a component or directive in the view...
constructor(private view: ViewContainerRef){}

ngOnInit(){
  let resolved = this.view.createComponent(this.resolver.create(cmp));
  resolved.instance['inputKey'] = stuff; // this is how you would add variables to cmp.
}

HTML-您会这样称呼...

import { Directive, ComponentFactoryResolver, ViewContainerRef, OnInit, Input } from '@angular/core';
import { RegistryService } from '../services/registry/registry.service';

@Directive({
  selector: '[resolve-cmp]'
})

export class HostResolverDirective {
  @Input() name; // This is a string you pass in to look up actual component reference in key/value registry.
  @Input() stuff; // This is data you want to pass to created cmp. Not needed.

  constructor(
    private resolver: ComponentFactoryResolver,
    private view: ViewContainerRef,
    private registry: RegistryService
  ){}

  ngOnInit(){
    const cmp = this.resolver.resolveComponentFactory<any>(
      this.registry[this.name]
    );
    const resolved = this.view.createComponent(cmp);
    // and add some data you are passing in...
    resolved.instance.stuff = this.stuff;
  }
}

您甚至可以对其进行迭代...

<ng-container resolveCmp name="myNewComponent"></ng-container>

更新：关于您更新的图片...

通常，您将像这样导入 Angular库（模块）...

<ng-container *ngFor="let cmp of component.list;">
  <ng-container resolveCmp [name]="cmp.name"></ng-container>
</ng-container>

在您的 MyAngularLibrary 中，您将像这样导出...

import { MyAngularLibrary } from '@somewhere-else';

@NgModule({
  imports: [
    MyAngularLibrary
  ],....

然后像这样使用视图中的组件...

import { MyNewComponent } from './this-module';

@NgModule({
  declarations: [
    MyNewComponent
  ],
  entryComponent: [
    MyNewComponent
  ],
  exports: [
    MyNewComponent
  ],....

Angular6-如何使用服务渲染组件

1 个答案: