小编Sha*_*ado的帖子

我在 Angular5 应用程序中到处使用 Angular-Material 库，但我不希望在我的标记中使用它的指令/组件/类名称，我更喜欢与外部库保持不可知的关系。但是，我尝试做这样的事情：

import { Directive, 
         ElementRef, 
         Renderer, 
         Renderer2 }  from "@angular/core";

import { MatButton }  from "@angular/material";
import { OnInit }     from "@angular/core";
import { Platform}    from "@angular/cdk/platform";
import {FocusMonitor} from "@angular/cdk/a11y";

@Directive({
  selector: '[my-button]'
})
export class MyButtonDirective extends MatButton {

  ngOnInit(): void {

  }

  constructor(renderer: Renderer2, elementRef: ElementRef, _platform: Platform, _focusMonitor: FocusMonitor) {
    super(renderer, elementRef, _platform, _focusMonitor);

  }
}

但是当我应用该my-button属性时，它似乎没有任何效果。即使console.logs从指令内部构造函数/onInit 也不会被打印。我不太确定我做错了什么，因为我以前从未在 Angular 中使用过指令。

我不明白这个错误。我试图完全按照示例mat-datepicker中所示使用with ，但我无法消除此错误。MomentJS

我的组件代码如下所示：

import { Component,
         Input,
         OnInit }    from '@angular/core';
import { TimeRange, TimeRanges } from "./time-range-selector.constants";
import * as moment from 'moment';
import {FormControl} from "@angular/forms";


@Component({
  selector: 'time-range-selector',
  templateUrl: './time-range-selector.component.html',
  styleUrls: ['./time-range-selector.component.scss']
})
export class TimeRangeSelectorComponent implements OnInit {

  private _timeRange: TimeRange;
  public timeRanges: {} = TimeRanges;


  public startDate: FormControl = new FormControl(moment([2017, 0, 1]));

  public endDate: FormControl = new FormControl(moment([2017, 0, 2]));

  public get selectedTimeRange(): TimeRange {
    return this._timeRange;
  }

  @Input()
  public …