Блог

Главная - Вопросы по программированию - Угловой. Передайте селектор одного родственного компонента другому

Угловой. Передайте селектор одного родственного компонента другому

#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!');
  }  
}
Метки: