Question

所以这就是问题所在，我正在尝试从App Component中注入的服务中创建一个新组件。我需要将新组件放在app组件html标签内，而不是放在外面。问题是我真的不希望应用程序组件必须向服务提供任何内容，我可能需要将服务注入其他地方，因此没有将它紧密耦合到应用程序组件。到目前为止，我已在应用组件html的末尾创建了一个DIV，然后使用@ViewChild从位于app组件中的此元素中读取ViewContainerRef。然后通过函数调用将其提供给服务，以便它可以使用createComponent。这允许将NEW组件放在app组件的范围内，而不是放在body中。不幸的是，这太依赖于提供ViewContainerRef的app组件。关于如何创建所描述的新组件的任何想法。

代码示例

app.component.html

<app-component>
    <div #newCompHook></div>
</app-component>

app.component.ts

@ViewChild('newCompHook', {read: ViewContainerRef}) newCompViewRef: ViewContainerRef;

constructor(appService: AppService) {
   appService.setViewRef(this.newCompViewRef);
}

app.service.ts

private myViewRef;

constructor(private compiler: ComponentResolver){
    this.myViewRef = null;
}

public setViewRef(vr: ViewContainerRef): void {
    this.myViewRef = vr; // <-- DO NOT WANT TO DO THIS !!!
}

public createNewComp(childCmp: Type): void {
    if (this.myViewRef !== null){
        this.compiler.resolveComponent( childCmp ).then((compFactory:ComponentFactory) => this.myViewRef.createComponent(compFactory) )
    }
}

createNewComp由外部源调用，可能会也可能不会提供要解析的childCmp类型。

所以关于如何在不需要从应用程序组件中提供任何内容的任何想法???

Answer 1

如果您需要在服务中使用viewContainerRef，这是唯一的解决方案...... 但是在服务中生成HCI组件并不是一个好习惯。这是其他组件的作用。

让我们举个例子：您的服务器会向您发送一个对象列表（例如字符串列表），并且您希望为每个字符串生成一个按钮。

在您的服务中，您只需管理字符串列表：

@Injectable()
export class MyService {
    private myModel : Array<String> = new Array();
    public get MyModel () : Array<String> {
      return this.myModel;
    }

    /// Assume you have method in the service to populate the model...
}

然后它是生成HCI的组件：

export class AppComponent {
   /// Use dependency injection to get service :
   constructor (private _myService : MyService){}

    public get MyModel () : Array<String> {
      return this.myService.MyModel;
    }
}

最后在您的组件模板中：

<div>
 <ul>
   <li *ngFor="let s of MyModel">
     <!-- Button with your model text -->
     <button>s</button>
   </li>
 </ul>
</div>

这是一个比在服务中生成组件更好的解决方案，因为只是想象你不想要按钮列表而是在你的HCI中有一个togglebuttons列表，在这里你只需要改变HTML。服务仍然相同，组件typescipt部分也是一样的！

angular 2 RC4创建组件

1 个答案: