我如何接近分享ng模板整个我的角度应用程序？

Question

假设我在角中有一个类型提前组件，显示它从后端端点接收到的查找匹配。我想要样式匹配的项目，我可以这样做通过ng-template，ngTemplateOutlet和ngTemplateOutletContext。

这里没问题。

问题是-我如何应用干法并使这个ng模板可重用，这样我就不必将它粘贴到每个想要使用它的容器中？

更新：，同时，我希望能够为需要另一个模板的其他类型的实体使用typeahead组件。

我不是在要求代码，而是询问一般的方法。

Answer 1

将所需的HTML添加到可重用组件中。给那个组件一个选择器。然后在任何需要它的HTML模板中使用这个选择器。

这里是pm星，它是一个显示恒星而不是数字等级的组件。

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

@Component({
    selector: 'pm-star',
    templateUrl: './star.component.html',
    styleUrls: ['./star.component.css']
})
export class StarComponent implements OnChanges {
    @Input() rating: number;
    starWidth: number;
    @Output() ratingClicked: EventEmitter<string> =
            new EventEmitter<string>();

    ngOnChanges(): void {
        this.starWidth = this.rating * 86 / 5;
    }

    onClick(): void {
        this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
    }
}

因此，在此模板中定义的代码可以包含在任何需要它的组件中：

 <pm-star [rating]='product.starRating'
      (ratingClicked)='onRatingClicked($event)'>
 </pm-star>