选择角

我有利用mdTooltip属性指示一对夫妇的元素使用ViewChild特定属性的指令（这就是它被称为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不是一个函数

我米猜测该项目没有正确选择。我如何定位第二个图标并切换它？

来源

2017-05-04 User 00000

如果你有一个实例的''icon' @ViewChild（..）myIcon'将工作，因为有两个实例。 @ViewChild将在两者之间发生冲突。所以你需要明确地定义它 – Aravind

@Aravind - 'iconTwo'没有明确定义它吗？我对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(); 
    } 
    }

来源

2017-05-04 23:27:22

谢谢，这正是我正在寻找的。为什么在文档中没有清楚地说明......描述这个的官方文档的任何链接？我只是看到了https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html，并且仅提到了metatdata中的“read”选项，但没有例子：/ –

我知道它没有很好的记录。我阅读Angular源代码。 –

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

<md-icon [mdTooltip]="connectStr">{{icon}}</md-icon>

Here's a Plunker

来源

2017-05-05 02:23:05 Dylan

感谢您的建议，我意识到这一点，但我在页面上有超过2个图标（问题已简化），我想借此机会了解更多关于Angular的信息，特别是如何定位我需要的元素。 –

回答

相关问题