在Angular中，如何在不使用指令/模板的情况下插入特定组件实例？
因此，假设我有一个组件ExampleComponent，它在其content视图中构建SomeOtherComponent组件的QueryList。
import {Component, ContentChildren, QueryList} from '@angular/core'
import {SomeOtherComponent} from '../some-other-component/some-other-component.component'
@Component({
selector : 'app-example',
templateUrl: './example.component.html',
styleUrls : ['./example.component.css']
})
export class ExampleComponent {
@ContentChildren(SomeOtherComponent)
someOtherComponents: QueryList<SomeOtherComponent>
}在它的模板中，我有一个应该在每个元素之后插入<hr />元素的NgFor。
<ng-container *ngFor="let component of someOtherComponents">
<!-- put component here -->
<hr />
</ng-container>因此，例如，这(在某些其他组件中)：
<app-example>
<app-some-other-component>blablabla</app-some-other-component>
<app-some-other-component>hello world</app-some-other-component>
<app-some-other-component>testing</app-some-other-component>
</app-example>将导致以下结果(在HTML中)：
<app-example>
<app-some-other-component>blablabla</app-some-other-component>
<hr />
<app-some-other-component>hello world</app-some-other-component>
<hr />
<app-some-other-component>testing</app-some-other-component>
<hr />
</app-example>然而，这就是问题所在。如何插入SomeOtherComponent实例？ng-content select属性不支持组件实例，CDK portals不喜欢我，我不想使用模板创建一些复杂的解决方案，并要求用户将其所有子组件包装在模板中……我该怎么办？
需要说明的是:我不想创建SomeOtherComponent实例。我想做一些类似于<ng-content select="app-some-other-component">的事情，但是要插入一个特定的实例(比如ContentChildren返回的QueryList中的实例)。我也不想使用指令/模板(比如将*thisDirectiveIMadeForJustOneComponentWhichMakesItRequireBeingPlacedInItsOwnModule放在所有子对象上)。
注意:还有其他方法可以在组件后插入水平标尺，请随意提及这些方法，只需确保回答问题即可。这只是一个例子。
回答 1
Stack Overflow用户
发布于 2019-06-17 02:01:09
根据我对你问题的理解，听起来你想要动态插入组件。这可以通过将所需的SomeOtherComponent数量放入一个数组中来实现，然后在ngFor中创建someOtherComponent，如下所示：
import {Component, ContentChildren, QueryList} from '@angular/core'
import {SomeOtherComponent} from '../some-other-component/some-other-component.component'
@Component({
selector : 'app-example',
templateUrl: './example.component.html',
styleUrls : ['./example.component.css']
})
export class ExampleComponent {
someOtherComponents: any[];
constructor(){
this.someOtherComponents.push({data: "insert_stuff_here"});
this.someOtherComponents.push({data: "insert_stuff_here"})
}
}然后在你的ngFor中
<ng-container *ngFor="let component of someOtherComponents">
<someOtherComponent [possibleInputHere]="component.data"></someOtherComponent>
<hr />
</ng-container>我希望这就是你要找的东西！
https://stackoverflow.com/questions/56578385
复制相似问题
腾讯云开发者
