Question

I'm a complete newbie when it comes to Angular, so I've research this quite a bit but can't find what I think I'm looking for.

I've got a piece of code like this:

@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();
        });
    }
}

By default all the help icons have the popover's placement set to left. In the html of this component the placement is set like this:

<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>

So the challenge is that I have component where four specific form fields with icons must open on top. These four help icon is nested two levels down, like this:

<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>

and so I have to mark the User Input with some property like popoverPlacement="top" and pass it down to the question-help-icon. How do I do that? Or if there is simpler way, I would like to see how. Thanks!

Answer 1

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

Dynamically position Angular Bootstrap popover based on different conditions

1 个答案: