Question

我正在为我的模板创建一个模态功能，以获取命名插座的利润，直到现在我手动编写我的链接以打开模态，但我想让它变得更容易。

当前代码：

<a [routerLink]="['', { outlets: { modal: ['upload'] }}]" [preserveQueryParams]="true">+</a>

预期代码：

<a [modal]="upload">+</a>
<button [modal]="upload">+</button>

我怎么能创造这样的东西？我已经看到了nativeElement，但我不认为编辑DOM是解决这个问题的最简单方法。

Answer 1

根据Günter的建议，我实际上是在点击事件。这是我遇到同样问题的最终代码。

@Directive({
    selector: "[dialog]"
})
export class DialogDirective {
    @Input("dialog") dialog: string;

    public constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute
    ) {}

    @HostListener("click", ["$event"])
    public onClick($event) {
        this.dialog = this.dialog || null;
        this.router.navigate(["", { outlets: { modal: this.dialog }}], { preserveQueryParams: true });
        $event.preventDefault();
    }
}

如果我没有指定任何元素，那么我只是关闭当前模态。

指令重定向到插座

1 个答案: