重定向到插座的指令

我目前正在爲我的模板創建一個模式功能，以獲取命名插座的利潤，直到現在我手動編寫鏈接來打開模式，但我想使它更容易。重定向到插座的指令

當前代碼：

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

預期代碼：

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

我怎麼能創造這樣的事情？我已經看到nativeElement，但我不認爲編輯DOM是處理這個問題的最簡單的解決方案。

來源

2017-01-23 Sakuto

您可以直接注入你的指令，路由器和ActivatedRoute，並調用的路由器功能一個導航到另一條路線（需求相對導航當前路由） –

並將其綁定到該元素上的click事件？ – Sakuto

正好。你可以使用'@HostListener（）' –

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

如果我沒有指定任何元素，那麼我只是關閉當前的模態。

來源

2017-01-24 10:28:09 Sakuto

重定向到插座的指令

回答

相關問題