Question

我们可以将HTML包含在

中

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html', // default html
  styleUrls: ['./app.component.scss']
})

我想get the template from the user and replace with the default一个。这样的事情。

export class AppComponent {
   @Input() customTemplate: TemplateRef;

   // some replacement logic
   // this custom template will replace the default one

}

HTML

<app [customTemplate]="myTemplate"></app>
<ng-template #myTemplate>
    Hello World!
</ng-template>

Answer 1

您无法动态更改Angular中的模板。你也不能在编译时设置其中几个。

但是，您可以使用预定义模板创建多个组件，并使用一些条件逻辑在固定容器组件中加载正确的组件（以及与之关联的正确模板）。

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html', // default html
    styleUrls: ['./app.component.scss']
})
export class AppComponent() { /   
    templateNumber: number; // set this to 1 or 2
    // Input or changed by another mean
}


@Component({
    selector: 'first',
    templateUrl: './first.component.html'
})
export class FirstComponent() { /* ... */ }


@Component({
    selector: 'second',
    templateUrl: './second.component.html'
})
export class SecondComponent() { /* ... */ }

app.component.html

<p>Hello !</p>
<first *ngIf="templateNumber === 1"> </first>
<second *ngIf="templateNumber === 2"> </second>

用户Angular2中的自定义模板将替换为默认模板

1 个答案: