时间戳

首页 > 解决方案 > 如何从 parentComponent 角度显示 childComponent 中的工具提示内容

angular - 如何从 parentComponent 角度显示 childComponent 中的工具提示内容

问题描述

我创建了一个父组件：-

@Component({
    selector: 'parent',
    templateUrl: '../views/parent.view.html'
})
export class ParentComponent {
    @ViewChild('primaryColorSample')
    primaryColorSample: AssetNoteComponent;
}

父 html :-

<div> <a [tooltip]="primaryColorSample">add</a>
    <child #primaryColorSample></child>
</div>

子组件：-

@Component({
    selector: 'child',
    templateUrl: '../views/child.view.html'
})
export class childComponent {

}

子 HTML :-

<tooltip-content #primaryColorSample [animation]="true" placement="left">
  <input type="text" name="child" required="true" />
  <button>save</button>
</tooltip-content>

我无法使用父 html 中的工具提示内容，请您建议我如何执行此操作。我正在使用 ngx-tooltop 和 Angular。

标签： angularbootstrap-4tooltip

解决方案

从 ngx-tooltip 的 doc 和 source code 中，我们可以看到[tooltip]Input 是 string 类型或 TooltipContent 组件。

您可以将子模板（即 TooltipContent）移动到父模板的顶部，然后删除<child #primaryColorSample></child>. 它会起作用的。

在您的设置中，您使用ViewChild获取对Child组件的引用，得到的回报是对子组件类的引用，而不是字符串，不是 TooltipContent 组件，因此它不起作用。

推荐阅读