Компонент дочернего селектора с расширенным шаблоном

Question

Я хочу создать компонент с иерархией представления вне Router и RouterModule

Пример:

comp-parent.ts

@Component({
  selector: 'comp-parent',
  template: `
        <p>parent works</p>
        <router-outlet></router-outlet>
        `,
  styleUrls: ['./comp-parent.css']
  })
export class ComponentParent { 
    protected foo: string;
}

comp-children.ts

@Component({
  selector: 'comp-children',
  template: "<p>Children works</p>",
  styleUrls: ['./comp-children.css']
  })
export class ComponentChildren extends ComponentParent { }

component-foo-bar.ts

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children></comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }

В ComponentBar Я ожидаю, что comp-children будет comp-parent с включенным comp-children, но только comp-children шаблон загружен.

Как загрузить родительский шаблон с <router-outlet/>, преобразованным в comp-children шаблон?

Answer 1

Когда вы наследуете класс, только вы можете использовать логику базового класса, но не его шаблон.

Фактически, вы не использовали дочерний компонент внутри родительского компонента.(Я имел в виду использование селектора дочернего компонента в шаблоне родительского компонента)

Таким образом, они на самом деле не родительские и дочерние, а просто базовые и производные классы

Answer 2

Если вы хотите создать такую ​​иерархию, вам не нужно использовать router-outlet и наследование.Просто используйте компоненты напрямую (от селекторов).См. StackBlitz демо.

Answer 3

Просто замените

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }

на

@Component({
  selector: 'component-foo-bar',
  template: "<comp-children></comp-children>",
  styleUrls: ['./component-bar.css']
  })
export class ComponentFooBar { }