Question

假设我在Angular中有一个typeahead组件，它显示了从后端端点接收的查找匹配项。我想为匹配项设置样式，我可以通过ng-template，ngTemplateOutlet和ngTemplateOutletContext进行设置。

这里没问题。

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

更新：与此同时，我希望能够将typeahead组件用于需要其他模板的其他类型的实体。

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

Answer 1

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

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

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>

如何在整个Angular应用程序中共享ng-template？

1 个答案: