如何获得子组件？

Question

我想将子组件放入父组件中

不知道，所以我需要帮助。

喜欢此代码

<parent><child></child></parent>

我希望孩子能成为父母的组成部分。

我希望让Child成为Parent的组成部分。 像这个stackblitz.com/edit/angular-h5j7vq一样，父组件中没有“ ng-content”，但是我想进入组件，html，template。

Answer 1

请参考官方文档中的this。

父母

event_type: any;

eventType = [
    {id: 'empty', name: ''},
    {id: 'create', name: 'Create'},
    {id: 'update', name: 'Update'},
    {id: 'delete', name: 'Delete'},
];

clearFilter(){
    this.event_type = this.eventType[0];
}

孩子

import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
template: `
<app-child [childMessage]="parentMessage"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent{
parentMessage = "message from parent"
constructor() { }
}

别忘了在模块文件中声明组件。

已编辑：-

import { Component, Input } from '@angular/core';

@Component({
selector: 'app-child',
template: `
Say {{ message }}
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {

@Input() childMessage: string;

constructor() { }

}

Answer 2

将此<child></child>添加到父组件html文件中，以使子代位于父组件中

Answer 3

如果要在父级的子级组件中获取数据，请使用@Output属性或@ViewChild（）。请参考[Component Interaction][1]

如果您只想在父级中调用子级组件，则添加parent.html：

<child-selector></child-selector>

Answer 4

这个问题尚不清楚，但是如果您要在父组件内部渲染子组件，则可以使用<ng-content></ng-content>。在父选择器之间添加标记时，ng-content将替换为内容。

我在底部提供了一个stackblitz演示。

parent.component.html

<div class="parent-container">
    <ng-content></ng-content>
</div>

another.component.ts

<parent>
    <h1>Content will render in parent.</h1>
</parent

  

https://stackblitz.com/edit/angular-bgchqe

     

https://medium.com/@joshblf/wtf-is-ng-content-8382b2a664e1