所以我的 html 看起来像这样:
<div>
<div>Lots of stuff that only appears in this component #1</div>
<div>Lots of stuff that only appears in this component #2</div>
<div>Lots of stuff that only appears in this component #3</div>
<div>Lots of stuff that only appears in this component #4</div>
</div>
目前我正在处理 CSS 和布局,但这意味着我要不断重构 DOM:
<div>
<div>
<div>Lots of stuff that only appears in this component #1</div>
Lots of stuff that only appears in this component #2
<div>Lots of stuff that only appears in this component #3</div>
Lots of stuff that only appears in this component #4
</div>
</div>
或者类似的东西。
我查看了 ng-template
,但它似乎只适用于 ngIf
和 ngSwitch
。
我真正想要的是这样的东西,我不必在每次布局更改时都重新复制所有内容。 顺便说一句,假设我不能创建一个新组件并将其移动到那个新组件中。
<div>
<div copyFrom="#1"></div>
<div>
<div copyFrom="#2"></div>
<div copyFrom="#3"></div>
</div>
<div copyFrom="#4"></div>
</div>
<div no-display name="#1">Lots of stuff that only appears in this component #1</div>
<div no-display name="#2">Lots of stuff that only appears in this component #2</div>
<div no-display name="#3">Lots of stuff that only appears in this component #3</div>
<div no-display name="#4">Lots of stuff that only appears in this component #4</div>
有没有办法做到这一点,这样我就不必复制粘贴内容,而只需复制粘贴对内容的引用?
我正在使用 Angular 7.1.4。
只是因为,因为我不知道您可能需要帮助我什么,这是 ng --version
的结果:
Angular CLI: 7.1.4
Node: 11.6.0
OS: darwin x64
Angular: 7.1.4
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.11.4
@angular-devkit/build-optimizer 0.11.4
@angular-devkit/build-webpack 0.11.4
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@angular/animations 7.2.0
@angular/cdk 7.2.1
@angular/fire 5.0.2
@angular/flex-layout 7.0.0-beta.23
@angular/material 7.2.1
@ngtools/webpack 7.1.4
@schematics/angular 7.1.4
@schematics/update 0.11.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
谢谢!
最佳答案
您正在寻找 NgTemplateOutlet
<div>
<ng-container *ngTemplateOutlet="template1"></ng-container>
<div>
<ng-container *ngTemplateOutlet="template2"></ng-container>
<ng-container *ngTemplateOutlet="template3"></ng-container>
</div>
<ng-container *ngTemplateOutlet="template4"></ng-container>
</div>
<ng-template #template1> ... </ng-template>
<ng-template #template2> ... </ng-template>
<ng-template #template3> ... </ng-template>
<ng-template #template4> ... </ng-template>
关于html - Angular 7.1.4 HTML 避免复制粘贴重组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54165001/