Question

我创建了这个Plunker以显示我目前的情况。在这个例子中没有任何错误，但我希望index.html中的<h1>也显示在应用程序中。

目前：

Hello Angular! v4.1.3
Hello World!!!

我的意图结果应该是

loading my name is Angular! v4.1.3
Hello Angular! v4.1.3
Hello World!!!

我知道我可以删除并将此<h1>放到任何组件中，但这不是我想要的，我需要在body中运行我的应用程序。有没有人有任何想法？

Answer 1

在此answer中，我展示了如何使用应用组件ViewContainerRef作为渲染目标。当您在其上调用createComponent时，新组件将在应用组件旁边创建（直接在body标签内）。

export class AppComponent implements OnInit {
  constructor(
    public viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(AppSecondaryComp);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
  }
}

只需确保在模块的AppSecondaryComp数组中注册entryComponents。

这对你有用吗？ app-secondary将在body标签内呈现。

Answer 2

您可以使用<ng-content>，但不能使用＆＃34; root＆＃34;组件（见https://github.com/angular/angular/issues/4946）。例如，如果在index.html中，则执行

<body>
   <app>Loading...</app>
</body>

app.ts

@Component({
    selector: 'app',
    template: `
        <h2>Hello {{user.name}}</h2>
        <app-secondary><h3>Some content</h3></app-secondary>
    `
})

APP-secondary.ts

@Component({
    selector: 'app-secondary',
    template: `
        <div>
            <h2>Hello World!!! </h2>
            <ng-content></ng-content>
        </div>
     `,
})

呈现的页面将是：

<body>
    <app>
        <h2>Hello Angular! v4.1.3</h2>
        <app-secondary>
            <h2>Hello World!!! </h2>
            <h3>Some content</h3>
        </app-secondary>
    </app>
</body>

Answer 3

index.html中的<body>标记是Angular bootstraps初始组件的位置。因为它是SPA，所以基本上整个应用程序的视图都将在此<body>标记内呈现。

您必须在src/app.ts文件中的boostraping组件的模板中进行所需的更改。

请参阅此处的Plunker

Angular2如何运作？

3 个答案: