如何显示来自 parentComponent 的 childComponent 中的工具提示内容 angular

Question

我创建了一个组件 parent:-

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

Parent html :-

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

child分量：-

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

}

Child HTML :-

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

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

Answer 1

在您的子组件中声明输入？

<child #primaryColorSample [tooltip]="primaryColorSample"></child>

Answer 2

从ngx-tooltip的文档和源码可以看出[tooltip] Input是string类型或者TooltipContent组件。

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

在您的设置中，您使用 ViewChild 获取对 Child 组件的引用，您在 return 中获取的是对子组件 class 的引用，不是字符串，不是 TooltipContent 组件，所以它不起作用。

如何显示来自 parentComponent 的 childComponent 中的工具提示内容 angular

how to show tooltip content which is in childComponent from parentComponent angular

tooltip

bootstrap-4

angular