如何在 Angular 4 中创建嵌套组件？答案

【问题标题】：How to create nested components in Angular 4?如何在 Angular 4 中创建嵌套组件？
【发布时间】：2018-05-08 00:31:33
【问题描述】：

我创建了一个名为 Parent 和 Child 的组件。我想将 ChildComponent 的所有 UI 显示到我的 ParentComponent。

child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  testContent = 'child component content...';

  constructor() { }

  ngOnInit() {
  }

}

child.component.html

<p>{{testContent}}</p>

parent.component.ts

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

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss'],
  directives: [ChildComponent]
})
export class AdminComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

parent.component.html

<div>
  Lorem ipsum
  <app-child></app-child>
</div>

我想在父组件中显示子组件的内容。但是，我在 Angular 4 中遇到错误

"对象字面量只能指定已知的属性和'指令' '组件'类型中不存在。"

你知道添加子组件的替代属性是什么吗？

【问题讨论】：

标签： javascript php html angular

【解决方案1】：

从父组件中移除指令，并将子组件添加到父组件所在的模块声明数组中。

【讨论】：

谢谢。我已将 ChildComponent 添加到模块声明数组中。 @NgModule({ declarations: [ AppComponent, AdminComponent, ChildComponent ]，会不会让它们处于同一级别？

【解决方案2】：

@component 中的指令和管道自角度 RC6 以来已弃用。只需将其从组件中删除即可。

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})

【讨论】：