Question

注意：最终目标是将datepicker输入绑定到组件变量，但是我无法通过这个最基本的部分。

我确定我做了一件蠢事！

控制台出错：

Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "#start_date" ("Change)="updateFilters()" placeholder="Search"/><input mat-datepicker="start_date"/><mat-datepicker [ERROR ->]#start_date="#start_date"></mat-datepicker><select name="type" [(ngModel)]="filters.fields.type" (ngM"): ng:///AppModule/AccountingComponent.html@0:574

Pug文件：

.filters
  input(mat-datepicker="start_date")
  mat-datepicker(#start_date)

透明的HTML：

<div class="filters">
    <input mat-datepicker="start_date" />
    <mat-datepicker #start_date="#start_date"></mat-datepicker>
</div>

显然，Angular不喜欢输入中的#start_date属性，但我对template reference variables的理解很弱，而且我无法找到有助于理清的资源我做错了什么。

需要更改哪些才能使其正常工作？

注意 - 我正在使用Webpack 3，pug-html-loader来转换pug =＆gt; HTML

Answer 1

您要尝试在mat-datepicker的属性中插入一个值，您应在其中插入变量的类型。模板变量是#start_date =＆＃34; HTMLDomElement＆＃34;

<mat-datepicker #start_date="string"></mat-datepicker>

决赛应该是

 <mat-datepicker #startDate></mat-datepicker>

组件

@ViewChild('startDate') startDate : HTMLDOMElement(i.e);

Answer 2

@Antonio's answer是正确的。

当我使用Webpack 3，并使用pug-html-loader转换哈巴狗时，我不得不另外理清如何根据需要进行转换。

最终，我需要将doctype option添加到pug transpilier（doctype: 'html'使其成为add an attribute without the value）。

为了做到这一点，我需要修改Webpack配置以正确传递参数：

webpack.conf.js的旧配置：

module.exports = {
  module: {
    rules: [
      // ... other rules omitted for brevity...
      {
        test: /\.pug$/,
        loaders: ['raw-loader', 'pug-html-loader'],
      }
    ]
  },
  plugins: [...]
}

更改为webpack.conf.js的新配置：

module.exports = {
  module: {
    rules: [
      // ... other rules omitted for brevity...
      {
        test: /\.pug$/,
        // NOTE: 'loaders' is deprecated in favor of 'use'
        use: [
          'raw-loader',
          {
            loader: 'pug-html-loader',
            options: {
              doctype: 'html'
            }
          }]
      }
    ]
  },
  plugins: [...]
}

模板变量导致模板分析错误：＆＃34; exportAs＆＃34;没有指令。设置为＆＃34; #start_date＆＃34;

2 个答案: