Angular 删除模板空白

Question

如果我有这个 Bootstrap 标记，它会呈现按钮之间有空格的良好效果

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <form>
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
  </form>
</div>

但是，如果我在 Angular 模板中具有与 StackBlitz https://stackblitz.com/edit/angular-fqw3g6?file=src/app/app.component.html中相同的标记，则空白将被删除，按钮将触摸彼此。

<link _ngcontent-cyj-c2="" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet"><div _ngcontent-cyj-c2="" class="container-fluid"><form _ngcontent-cyj-c2="" novalidate="" class="ng-untouched ng-pristine ng-valid"><button _ngcontent-cyj-c2="" class="btn btn-primary" type="submit">Submit</button><button _ngcontent-cyj-c2="" class="btn btn-secondary" type="reset">Reset</button></form></div>

是否有可能让 Angular 保留模板空白，因为在这种情况下它特别重要。

Answer 1

Angular 有一个默认打开的空白优化功能。如果你想防止这种情况，你可以在@Component中设置preserveWhitespaces: true

@Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],
   preserveWhitespaces: true
})
export class AppComponent  {}

或者

对于 tsconfig.app.json 中“compilerOptions”部分的完整应用程序，添加值preserveWhitespaces: true

如果可能的话，请使用第一个选项，因为空格会破坏你的包。