#angular
Вопрос:
У меня есть 2 родственных компонента. В SecondComponent
папке у меня есть сам компонент и его дочерний компонент. Поэтому мне нужно использовать в FirstComponent
дочернем компоненте SecondComponent
. Я имею в виду , что в моем FirstComponent
, в частности, в html-файле мне нужно использовать html-файл (селектор типа «дочерний компонент») дочернего компонента SecondComponent
.
Допустим, я уже написал код в дочернем компоненте the SecondComponent
, и мне нужно повторно использовать его в FirstComponent
(они оба являются братьями и сестрами, на одном уровне отступа, в папке компонентов).
Так что в first-componen.ts
том, что мне нужно использовать <child-component-of-the-second-component>
. Извините, что будет слишком много кода, но идея заложена в first-component.ts
файле, который мне нужно использовать <child-component-of-the-second-component>
.
Комментарии:
1. Я не в состоянии понять ваш пост. Пожалуйста, исправьтесь.
2. Не могли бы вы, пожалуйста, поместить сюда какой-нибудь код, для чего вы пытались?
3. Попробуйте предоставить нам вашу файловую структуру и конкретные имена. Эту абстрактную концепцию трудно понять
4. Попробуйте предоставить пример кода вместе с описанием
Ответ №1:
Я не знаю, правильно ли я тебя понял, но я думаю об этом так:
your-test.component.html:
<component-a></component-a>
<component-b></component-b>
находясь внутри component-b.component.html это выглядит так:
<component-b-child></component-b-child>
верно?
Вы можете добавить в свой компонент следующее-b.component.ts:
@ViewChild('b-child', {read: ComponentBChild}) componentBChild: ComponentBChild;
при добавлении селектора в ваш component-b.component.html
<component-b-child #b-child></component-b-child>
Тогда вы сможете изменить свой your-test.component.html:
<component-a [inputForComponentBChild] = componentB.componentBChild></component-a>
<component-b #componentB></component-b>
Ответ №2:
Возможно, следующий подход может решить вашу проблему:
@Component({
selector: 'app-second-component',
template: `
<h1>Second Component</h1>
<app-first-component [templateRef]="childComponentRef"></app-first-component>
<template #childComponentRef>
<app-child-component-of-second-component>
</app-child-component-of-second-component>
</template>
`,
})
export class SecondComponent{}
@Component({
selector: 'app-first-component',
template: `
<button (click)="display = !display">Toggle content</button>
<template *ngIf="display" [ngTemplateOutlet]="templateRef">
</template>
`,
})
export class FirstComponent{
display = false;
@Input() templateRef: TemplateRef;
}
@Component({
selector: 'app-child-component-of-second-component',
template: `
<b>This is child component of second component!</b>
`,
})
export class ChildComponent implements OnDestroy, OnInit {
ngOnInit() {
alert('app-child-component-of-second-component initialized!');
}
ngOnDestroy() {
alert('app-child-component-of-second-component destroyed!');
}
}