如何动态更改模板html

Question

我在我的角度应用程序中使用了动态组件。它工作正常，但是我想更改它使用的html模板，例如在我的动态component.ts中，我有：

@Component({
  selector: 'app-dynamic',
  template: '<p>Stackoverflow</p>' ,
  styleUrls: ['./dynamic.component.css']
})

因此，在装饰器中，我可以使用从其他保存所需html字符串的其他服务获取的变量而不是html字符串吗？喜欢：

@Component({
  selector: 'app-dynamic',
  template: variablehavinghtml,
  styleUrls: ['./dynamic.component.css']
})

我尝试使用templateUrl链接具有div之类的html：

<div [innerHTML]="variablehavinghtml"></div>

但是由于我的变量还可以包含带有角度属性绑定的标签，因此它不起作用，因此我必须在组件装饰器中提供html字符串。那我该怎么办呢？

Answer 1

您可以启用角度路由，然后直接重定向到所需的所有应用程序主体，或者可以在app.component中定义所有可能的组件，并在正确的路线上显示它们：

import { ActivatedRoute } from '@angular/router';在app.component.ts

constructor(..., private route: ActivatedRoute) { }初始化路由。

让我们创建一个变量r，该变量将保留第一个路由参数：

将this.route.pathFromRoot[1].url.subscribe(val => { this.r = val.toString(); });放在ngOnInit()

在您的html代码中，如果您以localhost:4200/forum为例，并且希望拥有仅论坛包含的内容，则可以执行以下操作：

<div *ngIf="input == 'forum'">
    <!-- Content here will be only displayed on the forum route -->
    ...
</div>