私のAngular CLIアプリケーションでMDCコンポーネントを使用する

Question

クイックスタートと角型クイックスタートがあります。材料設計用Webコンポーネントをit.Iで使用しようとしていますので、MDCCheckboxを使用して、次のコマンドを実行してくださいnpm install --save @material/checkboxどのerrors.Thenは、私は私のapp.module.tsに@material/checkboxからMDCCheckbox, MDCCheckboxFoundationをインポートした

<div class="mdc-form-field"> 
<div class="mdc-checkbox"> 
    <input type="checkbox" 
     id="my-checkbox" 
     class="mdc-checkbox__native-control"/> 
<div class="mdc-checkbox__background"> 
    <svg class="mdc-checkbox__checkmark" 
     viewBox="0 0 24 24"> 
    <path class="mdc-checkbox__checkmark__path" 
      fill="none" 
      stroke="white" 
      d="M1.73,12.91 8.1,19.28 22.79,4.59"/> 
    </svg> 
    <div class="mdc-checkbox__mixedmark"></div> 
</div> 
</div> 
<label for="my-checkbox">My Checkbox Label</label> 
</div> 

私app.component.htmlのチェックボックステンプレートを置き、私の輸入リストにそれらを追加しました。 しかし、私は材料スタイルが適用されているのを見いだしていません。私がやっている何か間違っていますか？誰か助けてください。

Answer 1

あなたのアプリケーションに@material/checkboxスタイルをインポートしていないようです。

const MDC_CHECKBOX_STYLES = require('@material/checkbox/dist/mdc.checkbox.css'); 

@Component({ 
    styles: [String(MDC_CHECKBOX_STYLES), /* ... */], 
}) 
class CheckboxComponent { 
    // Use MDCCheckbox within this component's template 
}; 

私たちはframework-examples/angular2フォルダにangular2のためにこれを行う方法の例があります：私たちのレポでhttps://github.com/material-components/material-components-web/blob/master/framework-examples/angular2/src/app/components/checkbox/checkbox.ts#L38

例はangular2シードではなく、角度のCLIを使用して、私たちのサスをロードしますが、CSSを使用してその代わりに比較的簡単でなければなりません。私は実際には、角cliのレポ内にサードパーティのlibsのためのCSSを含める方法については公式の文書を見つけることができませんでしたが、私はthis issue commentがそうする方法を説明するように見えた。