Question

我正在为其他类型的页面构建页面组件，并且我想根据页面的类型来动态加载templateUrl。

page.component.ts

@Component({
  selector: 'app-page',
  templateUrl: './type_of_page.component.html', // <-- i want this to dynamically load
  styleUrls: ['./page.component.scss']
})
export class PageComponent implements OnInit {

  type_of_page = 'person'; // person

  constructor(
    private http: HttpClient
  ) {
    this.http.get('api/type-of-page?id=1').subscribe(response => {
      this.type_of_page = response['type_of_page']; // tv series
    });
  }

}

是否有办法在page.component.ts

内部实现此 only

Answer 1

在容器组件中使用ng-template标记，可以解决动态加载模板/组件的问题。

https://stackblitz.com/angular/ndjkdnmaqdn?file=src%2Fapp%2Fad-banner.component.ts

Answer 2

我建议一种与Angular生态系统更好地工作的方法，并且这是越来越多的人正在使用的流行方法。您可以加载page.component.html本身，并在该组件内部，确定要加载的页面，然后使用ngIf使用所需的组件。

page.component.html

<app-page1 *ngIf="showPage1"></app-page1>
<app-page2 *ngIf="!showPage1"></app-page2> <!-- !showPage1 means not show page1-->

如何动态加载templateUrl取决于值

2 个答案: