Angular-在應用程序根目錄內部延遲加載CSS

Question

我正在嘗試在<app-root>...</app-root>內的<app-root>...</app-root>程序啟動上實現動畫。 因此，我完成了以下操作：

<app-root>
    <style>
      h1 {
        font-family: 'Calibre Medium';
        color: black;
        font-size: 2rem;
        margin: 0;
        letter-spacing: 1px;
      }
    </style>

    <h1>Test</h1>

</app-root>

它正在顯示，但CSS加載延遲，因此字體最初有所不同，大約1秒鍾后發生變化。

有沒有一種方法可以改善這種行為或實現這種行為的另一種方法？

編輯：我已經嘗試在docs head和style.css內部加載樣式-沒什么區別。

編輯：我正在使用引導程序-這會導致問題嗎？

Answer 1

哼...為什么在app-root內放置style標簽？ 這是一個要求嗎？ 如果不是，請嘗試以下方法：

<head>
    //...
  <style>
    #my-beautiful-loader {
      font-family: 'Calibre Medium';
      color: black;
      font-size: 2rem;
      margin: 0;
      letter-spacing: 1px;
    }
  </style>
</head>

//...
<app-root>

    <h1 id="my-beautiful-loader">Test</h1>

</app-root>

這應該在顯示h1標簽之前加載css

獎勵： stackblitz示例

Answer 2

在Angular中，如果要添加全局樣式，可以將其添加到angular.json文件中。

SRC / Styles.css中

@font-face {
  font-family: Calibre Medium;
  src: url(/* path to your fonts file */) format(/* fonts file format */);
}

h1 {
  font-family: 'Calibre Medium';
  color: black;
  font-size: 2rem;
  margin: 0;
  letter-spacing: 1px;
}

有關font-face src格式選項，請參見此處。

angular.json

...
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ],
...

這將在應用程序啟動時完全加載css，就像您將它們作為<link>標記或<style>標記添加到index.html 。 （請參閱此處）

Angular-在應用程序根目錄內部延遲加載CSS

問題描述

2 個解決方案

解決方案1
1 2019-07-08 17:43:28

解決方案2
1 2019-07-08 17:51:05

Angular-在應用程序根目錄內部延遲加載CSS

問題描述

2 個解決方案

解決方案1 1 2019-07-08 17:43:28

解決方案2 1 2019-07-08 17:51:05

解決方案1
1 2019-07-08 17:43:28

解決方案2
1 2019-07-08 17:51:05