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  {}

或

通过添加值 preserveWhitespaces：true

针对“ compilerOptions”部分中tsconfig.app.json中的完整应用程序

如果可能的话，请使用第一个选项，因为空格会打乱您的捆绑包。

角度删除模板空白

1 个答案: