Question

我已克隆并使用angular-cli quickstart。我正在尝试使用其中的材料设计Web组件。我只想要MDCCheckbox，所以我运行了以下命令npm install --save @material/checkbox，它安装了复选框，没有任何错误。然后我在我的app.component.html

中放置了复选框模板

<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.module.ts中的MDCCheckbox, MDCCheckboxFoundation导入@material/checkbox并将其添加到我的导入列表中。但我没有找到应用的材料样式。我有什么不对的吗？有人可以帮帮我吗

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

我们的repo中的示例使用angular2-seed，而不是角度CLI，并加载我们的Sass，但使用CSS应该相对简单。我真的找不到任何关于如何在angular-cli repo中包含第三方库的CSS的官方文档，但我确实发现this issue comment似乎解释了如何这样做。

在我的Angular CLI应用程序中使用MDC组件

1 个答案: