Question

我有几个使用mdTooltip属性指令的元素（那就是它所谓的right？）

@Component({
    selector: 'status-bar',
    template: '<md-icon #iconOne mdTooltip="Connected">check_circle</md-icon>
               <md-icon #iconTwo mdTooltip="Disconnected">warning<md-icon>'
})

我可以使用以下方式在toggle()上调用iconOne方法：

export class StatusBarComponent implements OnInit {
    @ViewChild(MdTooltip) myIcon: MdTooltip;

    ngOnInit(): void {
        this.myIcon.toggle();
    }
}

我理解它的方式，我应用属性指令的元素，有点成为属性指令的类型。所以我试着像这样选择iconTwo：

@ViewChild('iconTwo') myIcon: MdTooltip;

一旦命中代码，就会导致错误：

_this.myIcon.toggle不是函数

我猜这个项目没有被正确选中。如何定位第二个图标并进行切换？

Answer 1

使用额外参数使Angular返回指令

的引用

     @ViewChild('id2', { read: MyDir }) id2 : MyDir;

我认为你不需要为组件做这件事。如果指令在元数据中使用exportAs，则可以将ref变量分配给exportAs属性。

 <div my-dir #id2="myDir"></div>

以下是一个例子：

 @Directive({
    selector: '[my-dir]'
  })
  export class MyDir{
    @Input() id: number;

    toggle() {
      console.log('say hi', this.id);
    }   
  }

  @Component({
    selector: 'my-app',
    template: `
      <div>
        <button (click)="toggle2()">toggle 2</button>
        <h2 my-dir [id]="'1'">Hello 1</h2>
        <h2 my-dir #id2 [id]="'2'">Hello 2</h2>
      </div>
    `,
  })
  export class App {
    @ViewChild('id2', {read:MyDir}) id2 : MyDir;

    constructor() {
    }

    toggle2() {
      this.id2.toggle();
    }
  }

Answer 2

您也可以绑定它并使用1个图标。

<!-- Pikaday Library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>

<!-- Datepicker Input -->
<label for="datepicker">Date</label>
<input type="text" id="datepicker">

Here's a Plunker

使用Angular

2 个答案: