導航到routerLink屬性的輔助路由URL

Angular支持將主路由作爲字符串屬性。導航到routerLink屬性的輔助路由URL

即

<button routerlink="/path1">Click Me!</button>

然而，當有多個網點，添加輔助路線不工作：

<button routerlink="/path1(foo:/path2)">Click Me!</button> <<-- does not work

有沒有一種方法，使這項工作？

注：我意識到其可能與實現這一目標：

<a [routerLink]="['/path1', { outlets: { foo: '/path2' } }]">Click Me!</a>

我的問題更多的是這是否可能使用普通字符串屬性（路由器框架可以分析它在幕後）。

來源

2017-07-30 pixelbits

我想你也可以使用[** navigateByUrl **]（https://angular.io/api/router/Router/#usage-2）像這樣'router.navigateByUrl（「/ path1/foo/path2「）;' –

嘿，沒有[我的回答]（https://stackoverflow.com/a/45396457/2545680）有幫助嗎？ –

目前的路由器實現似乎不可能。當你傳遞一個字符串到routerLink它被包裹成一個陣列的位置：

@Directive({selector: ':not(a)[routerLink]'}) 
export class RouterLink { 
    ... 

    } 

    @Input() 
    set routerLink(commands: any[]|string) { 
    if (commands != null) { 
     this.commands = Array.isArray(commands) ? commands : [commands]; <--------------- 
    } else { 
     this.commands = []; 
    } 
    }

而且here is功能，試圖從中解析包裹commands和提取物出口：

function getOutlets(commands: any[]): {[k: string]: any[]} { 
    if (!(typeof commands[0] === 'object')) return {[PRIMARY_OUTLET]: commands}; 
    if (commands[0].outlets === undefined) return {[PRIMARY_OUTLET]: commands}; 
    return commands[0].outlets; 
}

正如你可以看到，如果包裹的commands內的值不是一個對象 - 這是您的情況，它始終默認爲primary outlet，並將該值用作此主要插座的路徑：

if (!(typeof commands[0] === 'object')) return {[PRIMARY_OUTLET]: commands};

來源

2017-07-30 04:43:51

很久以前我調查過它，看起來你是對的。我們不能在'routerLink'中使用字符串來導航到'outlets'路徑，但是可以通過數組完成 – yurzui

導航到routerLink屬性的輔助路由URL

回答

相關問題