angular - 带有扩展模板的组件子选择器

Question

我想在 Router 和 RouterModule 之外创建具有视图层次结构的组件

例子：

比较父.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 { }

组件-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

只需更换

@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 { }

Answer 3

如果你想建立这样的层次结构，你不需要使用router-outlet也不需要继承。只需直接使用组件（通过选择器）。请参阅StackBlitz演示。