Question

我正在尝试创建一个重用ion-header的组件。使用ion-header的工作方式，它必须是页面的根组件（除body外，什么都没有）。我研究了几种方法可以做到这一点：

我已经创建了带有属性选择器的组件：

@Component({
  selector: '[head]',
  template: `<ion-header>... {{head}} ...</ion-header>`,
})
export class HelloComponent  {
  @Input() head: string;
}

但是，如果我尝试使用<ng-container head="The Title"></ng-container>，则会从Angular渲染器本身收到错误：DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.。

我可以更新模板以包含ion-header本身的内容，而改为包含<ion-header head="The Title"></ion-header>，但是我希望能够重用整个组件，而不必指定元素和指示。如果需要的话，这也使我无法在ion-header中包含其他属性。

示例：https://stackblitz.com/edit/angular-fgfudn

有什么方法可以在根级别渲染组件的模板内容？

Answer 1

嗯，有一种复杂的方法可以做到这一点，您的组件应该将ng-template与ion-header一起使用。然后，您可以使用组件工厂/解析器手动创建嵌入式视图。这样，您可以在同一层上的组件标签（可以显示：例如，没有显示）之后立即用ng-template渲染ion-header。

不要渲染没有嵌套的Angular容器组件

1 个答案: