角preserveWhitespaces : true / false，更改应用程序中的布局

Question

我们有一个角度应用程序，它动态地生成自定义组件。

组件被正确地呈现，但是对于角的默认配置(preserveWhitespaces : true)，我们在呈现的组件之间有不想要的“空格”。当我们将这个配置设置为false时，这些空格就消失了(它们是完全相同的组件，具有完全相同的样式)。

为什么，为什么布局会因为空格而改变呢？我们知道它与css无关，因为没有css参与(柱塞也没有css参与)。

我们正在使用最新版本的角4.4.6

下面是这种行为的一个原始例子：

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


@Component({
  selector: 'my-app',
  template: `
    <h1>{{name}}</h1>
    <div>
      <strong>preserveWhiteSpaces : false</strong>
      <preserve-whitespace-false></preserve-whitespace-false>
      <br>
      <strong>preserveWhiteSpaces : true</strong>
      <preserve-whitespace-true></preserve-whitespace-true>
    </div>
  `,
  preserveWhitespaces: false
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@Component({
  selector: 'preserve-whitespace-false',
  template: `
    <div>
      <custom-element></custom-element>
      <custom-element></custom-element>
    </div>
  `,
  preserveWhitespaces: false
})
export class PreserveWhiteSpaceFalseComponent {}

@Component({
  selector: 'preserve-whitespace-true',
  template: `
    <div>
      <custom-element></custom-element>
      <custom-element></custom-element>
    </div>
  `,
  preserveWhitespaces: true
})
export class PreserveWhiteSpaceTrueComponent {}

@Component({
  selector: 'custom-element',
  template: `<span>custom-element</span>`,
})
export class CustomElementComponent {
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App,CustomElementComponent,PreserveWhiteSpaceTrueComponent,PreserveWhiteSpaceFalseComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

下面是柱塞：

https://plnkr.co/edit/y5PwvRnPukDk35RwKTSJ?p=preview

谢谢！

Answer 1

在这里面放一个明确的空间是目前我想出的最好的方法：

{{ ' ' }}

搜索也很容易--如果保存空格的选项越来越多的话。

您甚至可以将它放在自己的行上，如下所示：

<div *ngIf="address.countryCode == 'US'">
    <span>{{ address.city }}</span>
    {{ ' ' }}
    <span>{{ address.stateCd }}</span>
    {{ ' ' }}
    <span>{{ address.zipOrPostal }}</span>
</div>