В моем POC отображаются два экземпляра панели инструментов. Я хочу, чтобы дети появлялись в соответствующем экземпляре компонента.
Но текущее поведение таково, что даже если я нажму кнопку в первом экземпляре, дочерние элементы будут отображаться во втором экземпляре.
Компонент панели мониторинга.html
<div class="border">
<p>
dashboard works!
</p>
<button [routerLink]="['child1']">one</button>
<button [routerLink]="['child2']">two</button>
<div class="border m-1">
<router-outlet></router-outlet>
</div>
<p>-----------------------------------------------</p>
</div>
app.component.html
<div class="row">
<app-dashboard></app-dashboard> // instance 1
<app-dashboard></app-dashboard> // instance 2
</div>
app.routing.module.ts
const routes: Routes = [
{ path: 'child1',
component: ChildOneComponent
},
{
path: 'child2',
component: ChildTwoComponent
}
];
ребенок-one.component.html
<p>
child-one works!
</p>
ребенок-два.component.html
<p>
child-two works!
</p>
Я хочу написать дополнительный код в дочерних элементах 1 и 2 после загрузки компонентов.
Может ли кто-нибудь сказать мне, где я ошибся или какой подход выбрать? Я уже пробовал использовать вспомогательные маршруты и присваивать идентификаторы маршрутам. Но они не работали.
Я просто хочу создать несколько экземпляров одного и того же компонента и включить маршрутизацию внутри них, чтобы конкретный маршрутизируемый компонент отображался внутри соответствующего экземпляра.