Angular 6嵌套模板视图

Question

我是Angular的新手（正在使用Angular 6），我想在布局视图中定义一些“插入内容块”。

例如：

<!-- layout.component.html -->
<div>{{my.title.component}}</div>
<div>{{my.body.component}}</div>

然后，我希望能够执行以下操作：

<!-- title.component.html -->
<h1>I am the title</h1>

对于身体：

<!-- body.component.html -->
<p> I am a very complex component inserted up there </p>

然后我想创建如下内容：

<!-- assembled.component.ts -->
@MagicalDecorator({
   layout: LayoutComponent,
   use_as_title_component: TitleComponent,
   use_as_body_component: BodyComponent,
}

我可以这样做吗？我可能使用了错误的方法，但这就是我想象的那样。如果有更好的方法，我也想知道。

编辑： 我的想法是，我希望能够使用布局组件添加格式（例如，将它们放在引导面板中），而不必为要使用相同布局的每种组件组合重复相同的格式

Answer 1

您看过路由吗？

通过路由，您可以定义标准布局容器，然后仅替换该容器内部的内容。

例如，您可以定义一个“ app”容器（通过路由器出口定义），以定义整个页面。

您可以定义一个“外壳”容器，并只需更改路线即可替换其中显示的组件。

这是我的意思的照片：

这是另一个屏幕截图。这个有三个子路由器出口。最里面的路由器出口用于显示特定选定选项卡的内容。

Answer 2

以“角度”方式，您只需创建一个带有2个子组件的父组件：

子组件：

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

@Component({
  selector    : 'title-component',
  template : '<h1>I am the title</h1>',
  styleUrls   : ['./title.component.scss']
})
export class TitleComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
}

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

@Component({
  selector    : 'body-component',
  template : '<p> I am a very complex component inserted up there - with an external field of {{}}</p>',
  styleUrls   : ['./body.component.scss']
})
export class BodyComponent implements OnInit {
@Input()
someField;

  constructor() { }
  ngOnInit() {}
}

父组件：

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

@Component({
  selector    : 'assembled-component',
  template : ׳<section>
     <title-component></title-component>
     <body-component></body-component>
</section>
׳,
  styleUrls   : ['./assembled.component.scss']
})
export class AssembledComponent implements OnInit {
  fieldNameOfParentComponent = "Some Formatting";
  constructor() { }
  ngOnInit() {}
}

（*）您可以在应用程序中所需的任何模板中使用选择器，只要将这些组件导出到模块中（将其称为innerModule）并将该模块导入要添加这些组件的模块中即可。 （让其称为externalComponent的选择器）注册在（让其称为.externalModule）上。

（**）如果要在同一模板中多次使用同一组件，请使用* ngFor指令。 您也可以将输入字段传递给它。 例如：

<section>
      <title-component></title-component>
      <body-component *ngFor="let item in bodyData" 
              [fieldFromOutside]="fieldNameOfParentComponent">
           {{ item.someField }}
      </body-component>
<section>

Answer 3

首先使用angular-cli生成组件（如果尚未生成）：

ng generate component Title，ng generate component Body

现在，当您导航至这些组件中的每个组件的打字稿文件时，请注意以下内容：

selector: 'title-component'

在您的layout.component.html内，您想放置<title-component></title-component>来调用该组件。

编辑：

如果您希望根据配置值选择使用其他title-components，则可以使用*ngIf

<title-component-1 *ngIf="title === 'title1'"></title-component-1>

<title-component-2 *ngIf="title === 'title2'"></title-component-2>

Answer 4

为什么不只是在app.component中设置标准布局，而在路由器文件中使用嵌套视图。对于每种路由，可以通过在路由器配置中更改它们来在各种嵌套路由中使用不同的组件