如何在我的Angular应用程序中共享ng-template？

假设我在Angular中有一个typeahead组件，它显示它从后端端点收到的查找匹配。我想对比赛项目进行设计，并且我可以通过ng-template，ngTemplateOutlet和ngTemplateOutletContext这样做。如何在我的Angular应用程序中共享ng-template？

这里没问题。

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

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

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

来源

2017-08-11 user776686

将所需的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>

来源

2017-08-11 17:45:01 DeborahK

谢谢，然后如果我想使用相同的预输入在另一个地方，而是仰视并呈现A类型的项目，想要查看B类型的当前项目 - 我应该如何提供B类型的模板以进行绑定？ – user776686

将它作为@input参数传入。查看构建可重用的文档（在这里也称为“子”或“嵌套”组件）：https://angular.io/guide/component-interaction#component-interaction或者你可以看到我是如何在我的Pluralsight中构建Star Component当然这里：https://app.pluralsight.com/library/courses/angular-2-getting-started-update – DeborahK

如何在我的Angular应用程序中共享ng-template？

回答

相关问题