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

Question

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

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[];
}

Answer 1

如果要将信息注入子组件，请像这样使用@input。

ChildComponent.ts:

@Input() inputVariableName: InputObjectType;

ParentComponent.html:

<app-child-selector [inputVariableName]="parentComponentVariableName">
</app-child-selector>

如果你想将信息从子组件传递到父组件，这有点复杂，但我建议使用观察者模式，使用服务和事件发射器。希望对您有所帮助。

Answer 2

如果你想将 HTML 作为参数传递给组件，有很多方法，各有利弊。主要不同：

内容投影。搜索 <ng-content>。（最简单但有很大的局限性）
将模板作为参数传递。搜索 @ContentChildren、TemplateRef、ViewContainerRef、结构指令。（灵活）
将组件的类型作为 @Input 传递并在另一个组件中渲染它（使用 ViewContainerRef.createComponent、[ngComponentOutlet] 等）。（看起来很脏）

他们需要一些帮助代码。他们可以有一些'perversions'。选择取决于很多原因。

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

Render Component On To another Component Angular 5

components

angular-components

angular