Angular 如何在组件之间共享HTML？

我想在我的一些组件（但不是全部）之间共享一些HTML（布局）

app.compomonet.html:

我的一些组件（但不是全部）共享一些HTML：

组件X

{{副标题}
特定于X_的HTML

组件Y

{{副标题}
Y_特定的HTML

我想用占位符为实际组件HTML定义共享HTML（注意数据绑定）：

{{副标题}
在此处插入\u组件\u HTML\u

因此，我的组件可以这样定义：

组件X

X_特定的HTML

组件Y

Y\u特定的\u HTML

现时路线：

const批准：路由=[
{path:'x'，component:XComponent}，
{path:'y'，component:YComponent}
];

这可能吗？

在其他地方得到帮助

使用“内容投影”共享HTML非常容易

数据绑定有点棘手，我设法使用BehaviorSubject实现了这一点

page-layout.component（共享HTML）

副标题：{{副标题}

从'@angular/core'导入{Component，OnInit}；
从“../../services/layout.service”导入{LayoutService}；
@组成部分({
选择器：“页面布局”，
templateUrl:'./page layout.component.html'，
样式URL:['./页面布局.component.css']
})
导出类PageLayoutComponent实现OnInit{
副标题=''；
构造函数（专用LayoutService:LayoutService）{
}
恩戈尼尼特（）{
this.LayoutService.observable.subscribe（x=>{
if（控制台）{
log（'PageLayoutComponent，subscribe:'+JSON.stringify（x））；
}
this.subtitle=x.subtitle；
});
}
}

assembly-list.component（使用共享HTML的组件）

待办事项

从'@angular/core'导入{Component，OnInit}；
从“../../services/layout.service”导入{LayoutService}；
@组成部分({
选择器：“程序集列表”，
templateUrl:“./assembly list.component.html”，
样式URL:['./程序集列表.component.css']
})
导出类AssemblyListComponent实现OnInit{
构造函数（专用LayoutService:LayoutService）{
}
恩戈尼尼特（）{
this.LayoutService.emitTitle(
“AssemblyListComponent1”、“AssemblyListComponent2”
);
}
}

布局服务（共享HTML的数据绑定）

从'@angular/core'导入{Component，Injectable}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
导出接口ILAOutServiceData{
标题：字符串；
字幕：字符串；
}
@可注射（）
导出类布局服务{
私有行为主体：行为主体=
新的BehaviorSubject（{title:null，subtitle:null}）；
可观察=this.behaviorSubject.asObservable（）；
emitTitle（标题：string，副标题：string）{
if（控制台）{
log（`LayoutService.emitTitle（\'${title}\'，\'${subtitle}\'`）；
}
常量数据：ILayoutServiceData={
标题:标题,，
字幕：字幕
};
this.behaviorSubject.next（数据）；
}
}

您是否尝试过使用服务来更改组件中的数据，而不是创建另一个组件？请注意，该示例非常简单。不幸的是，更改数据不是可行的解决方案。要求是处理共享布局。我明白了。可以在共享组件/tem中使用另一个路由器插座plate，你能分享一下你是如何定义路由的吗？当然，我刚刚编辑了我的问题。路由没有什么特别之处。如果需要，我可以创建一个更完整的示例，但这需要一些时间。你是否尝试过在共享组件中使用

ngModel

？