将组件渲染到另一个组件Angular 5

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将组件渲染到另一个组件Angular 5相关的知识,希望对你有一定的参考价值。

我有一个我创建的组件及其被调用的选项,因为它呈现了编辑和删除按钮。然后我有一个可重用的表组件。我将表组件注入到站点的视图中。然后我导入选项组件,但我没有在该视图上显示它,因为我想将它传递给表组件并将其呈现为标记。是否存在将选项组件从主组件传递到表组件并注入它,因为不是没有具有相同选项组件的表。

options.component.ts

@Component({
    selector: 'options',
    template: `
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active">
                <input type="radio" name="options" id="option" autocomplete="off" checked>Edit
            </label>
            <label class="btn btn-danger">
                <input type="radio" name="options" id="option" autocomplete="off" checked>Delete
            </label>
         </div>`,
    styles: []
})

export class OptionsComponent implements OnInit {
     constructor() { }

     ngOnInit() { }
}

main.component.ts

import { TableComponent } 'file location here';
import { OptionsComponent } 'file location here'; // Component is injected here and I want to pass it to <app-table></app-table>
@Component({
    selector: 'app-main',
    template:'<app-table [tableData]="LocationsList"></app-table>'
})

export MainComponent implements OnInit {
    LocationsList: []; // list of locations

}

table.row.component.ts

@Component({
    selector: 'app-table',
    template: `
       <ul>
          <li *ngFor="let property of tableData">{{ property }}</li>
       </ul>`,
})

export class TableComponent implements OnInit {
     @Input() tableData: any[];
} 
答案

如果要将html作为参数传递给组件,则有很多方法,包括优点和限制。大不相同:

  1. 内容投影。搜索<ng-content>。 (最简单,但有很大的局限性)
  2. 将模板作为参数传递。搜索@ContentChildrenTemplateRefViewContainerRef,结构指令。 (灵活)
  3. 将组件的类型传递为qazxsw poi并将其呈现在另一个内部(使用qazxsw poi,qazxsw poi等)。 (看起来很脏)

他们需要一些帮助代码。他们可能会有一些“变态”。 hhoice取决于很多原因。

另一答案

如果要将信息注入childComponent,请像这样使用@input。

ChildComponent.ts:

@Input

ParentComponent.html:

ViewContainerRef.createComponent

如果你想将信息从子组件传递到父组件,它会有点复杂,但我建议使用观察者模式,服务和均衡器。希望有所帮助。

以上是关于将组件渲染到另一个组件Angular 5的主要内容,如果未能解决你的问题,请参考以下文章

Angular 5 - 无法从一个组件导航到另一个组件

Angular 8:将表单数据作为服务发送到另一个组件

在 Angular 中,当组件不是父/子时,如何将值从一个组件传递到另一个组件?

将数据从一个组件传递到另一个 Angular 2 时的服务变量

将数据从一个组件传递到另一个 Angular 2

使用使用 Angular 6 的服务将 JSON 文件从一个组件传递到另一个组件