Question

我要实现的目标

我有一个正在实践的CRM面板。该CRM面板具有页面，并且在屏幕的左侧具有导航。

每个页面都应显示标题。

这意味着我必须在每个组件模板中包括<h2>title</h2>。

我应该提供的解决方案

如果我创建一个获得PageBaseComponent的组件title，该怎么办：

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

  constructor(private title: string) { }

  ngOnInit() {
  }

}

然后在我有新页面时继承它：

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

  constructor() {
    super("Dashboard");
   }

  ngOnInit() {
  }

}

在PageBase的模板中，我

<h1>{{title}}</h1>

在继承其组件的组件中，如果可能的话，我可以做类似的事情：

<parent-component-html></parent-component-html>

my page info here blab blabla

有可能吗？实现该结构的正确方法是什么？

Answer 1

您创建基本组件PageBaseComponent的想法非常好。但是，在Angular中，这种共享功能的实现方式有所不同。

我建议您看一下角度夹杂。在您的示例中，PageBaseComponent并没有太多功能。要点-共享模板。

因此，在这种情况下，您可以通过以下方式创建PageBaseComponent组件：

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

  @Input() title: string;
  constructor() { }

  ngOnInit() {
  }

}

<h1>{{title}}</h1>
<ng-content></ng-content>

然后在您要在模板中使用相同基本行为的所有页面中，编写以下内容：

<app-page-base [title]="'Some Title'">
  <!-- Current Page Content -->
</app-page-base>

<ng-content></ng-content>中的PageBaseComponent将替换为<app-page-base></app-page-base>标记之间的内容。

通过这种方式，您可以在PageBaseComponent中创建所需的任何基本布局，并将其在所有页面上共享。

这里的逻辑保持解耦。根据您的需求，这可能是好事还是坏事。

为了为多个组件创建一些基本的共享逻辑，您需要创建一个简单的类-没有 @Component 装饰器。然后使用您的组件进行扩展。请注意，这些组件可与Angular依赖项注入系统一起使用。因此，当您将一些变量写入组件的构造函数时，Angular会尝试使用其DI系统来解析它。在您的示例中，它将失败。

因此，总结一下-如果要创建共享模板，请使用包含。如果要创建共享行为，请使用基类（无组件装饰器）。

Angular 6创建一个基础组件并在html中调用其父级？

1 个答案: