根据不同的条件动态定位Angular Bootstrap popover

Question

当谈到Angular时，我是一个完全新手，所以我对此进行了相当多的研究，但找不到我认为我正在寻找的东西。

我有一段这样的代码：

@Component({
selector: "help-icon",
templateUrl: "help-icon.component.html",
styleUrls: ["help-icon.component.scss"],
host: {
    "[class.active]": "show",
    "(click)": "open($event)"
    }
})
export class HelpIconComponent {
     @Input() helpId: string;
     @Input() placement: string = "left";
     @ViewChild("pop") pop: PopoverDirective;

     public htmlHeader: string = "Loading help text";
     public htmlBody: string = "Please wait...";

     constructor(private elementRef: ElementRef, private backend: Backend, 
       private helpTextService: HelpTextService, private ngZone: NgZone) { }

     open(): void {
         this.helpTextService.getHelpText(this.helpId).then(data => {
         if (data && (data.HeaderText || data.Body)) {
            this.htmlHeader = data.HeaderText;
            this.htmlBody = data.Body;
         }
         else {
            this.htmlHeader = "<div class='help-text-unavailable'>
                Help text is currently unavailable.</div>";
            this.htmlBody = "";
         }

             this.pop.show();
        });
    }
}

默认情况下，所有帮助图标都将弹出框的位置设置为左侧。在此组件的html中，展示位置设置如下：

<ng-template #popTemplate>
<div class="popover-wrapper" #popTemplate>
    <button tabindex="-1" class="close-help-box" (click-space-enter)="pop.hide()">
        <span class="icon-close" />
    </button>
    <div class="header" [innerHtml]="htmlHeader"></div>
    <div class="body" [innerHtml]="htmlBody"></div>
</div>

所以挑战在于我有一个组件，其中带有图标的四个特定表单字段必须打开。这四个帮助图标嵌套了两个级别，如下所示：

<question structureSectionColumn2 property="User Input" 
   [query]="propertyQuery.DetailsQuestionQueries.get('User Input')">
    <question-label class="left-content">User Input:
        <help-icon class="help-icon" helpId="UserInput">
            <question-help-icon class="icon-content" />
        </help-icon>
    </question-label>
    <select-input class="right-content" />
 </question>

所以我必须使用像popoverPlacement="top"这样的属性标记用户输入并将其传递给question-help-icon。我怎么做？或者如果有更简单的方法，我想看看如何。谢谢！

Answer 1

通过一些外部帮助，我能够解决问题。我在[placement]="'top'"]标签中添加了<help-icon ...>属性。这将placement变量设置为top。