如何从具有不同事件绑定的组件中抽象共享HTML ?

Question

我正在做一个项目，我意识到我的很多组件都共享一个HTML片段，比如:

<div class>
<button type="button" (click)="example()">Label</button>
...
</div>

每个组件都有不同的点击绑定，我想把共享的HTML部分抽象到一个组件中，记住这一点。我想这里应该用路由吧?

Answer 1

通用HTML脚本可以移动到它自己的组件中，然后可以在使用相同HTML的其他组件中重用。

HTML脚本可以封装到它自己的组件中，MyComponent封装HTML作为它的模板:

<div class>
<button type="button" (click)="example($event.value)">Label</button>
...
</div> 

你还可以使用输出访问器和发射器从共享组件向父组件触发事件。

共享组件MyComponent的输出发射器和事件处理程序声明如下:

@Component({
selector: 'app-my-component',
...
})
export class MyComponent implements OnInit {
@Output() clickEvent: EventEmitter<boolean> = new EventEmitter();
...
example(event)
{
this.clickEvent.emit(value);
}

然后，你的共享组件可以在另一个组件的HTML模板中使用，使用新组件的选择器的HTML标签:

<app-my-component (clickEvent)="eventClicked($event)"></app-my-component>

在父组件中声明的事件将从子组件的事件通知中处理成自己的事件:

eventClicked(value: any) {
// do something with the value from the child component.
}

以上是将HTML封装到一个共享组件中，并在Angular应用中作为组件构建块的基本概述。