Template Variable Causing Template Parse Error: There is no directive with "exportAs" set to "#start_date"

Question

正在尝试按照他们的文档构建 Material Design 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

哈巴狗文件：

.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 => html.

Answer 1

您将尝试在 mat-datepicker 的属性中插入一个值，您应该在其中插入变量类型。模板变量是#start_date="HTMLDomElement"

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

最后应该是

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

组件

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

Answer 2

正确。

当我使用 Webpack 3 并使用 pug-html-loader 转译 pug 时，我不得不另外解决如何使其按需要转译的问题。

最终，我需要添加 doctype option to the pug transpilier (doctype: 'html' causes it to 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: [...]
}

Template Variable Causing Template Parse Error: There is no directive with "exportAs" set to "#start_date"

Template Variable Causing Template Parse Error: There is no directive with "exportAs" set to "#start_date"

webpack-2

angular-material2

pug

angular