Question

我有在项目中无处不在使用的模板：

<div class="col-xs-6 event" *ngFor="let event of events">
  <h1>{{ event.title }}</h1>
  <p>{{ event.content }}</p>
</div>

我使用许多属性：标题，内容等。

我的项目结构如下：events-list.component.ts显示事件列表，而events-get.component.ts显示事件的详细信息。在事件的详细信息中，我还显示其他事件（例如“您可能也喜欢”集团）。

我没有在何处以及如何声明一个我可以使用的“模板” ，而不是重复此代码。

类似<event-template></event-template>，但可以传递属性。

Answer 1

感谢评论，我成功实现了想要的目标。

我创建了一个名为事件的新组件。我现在有一个event.component.ts：

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

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.css']
})
export class EventComponent implements OnInit {
  @Input() event: Event;

  constructor() { }

  ngOnInit() {
  }

}

我将此组件的模板设置为我想在各处重复使用的模板。

然后，在我的events-list.component.ts中，我可以使用：

<app-event class="col-xs-12 col-sm-6 col-md-4 col-lg-4" *ngFor="let event of events" [event]="event"></app-event>

这太完美了！

重用Angular 7中具有属性的模板

1 个答案: