点击子菜单，在侧边栏，请与材料设计的URL采用了棱角分明4

问题描述：

我工作的一本书集合计划，我有一个静态sidebar这将有选择，当你点击一些的发送选项你到一个网址。点击子菜单，在侧边栏，请与材料设计的URL采用了棱角分明4

我不能让将URL部分工作。

所以我只是有一个sidenav，然后是一个名为Store的菜单项，然后是一个名为Amazon的子菜单。

可能有拼写错误，因为我键入这作为代码是不同的计算机上。基本上，我怎样才能得到一个子菜单将我的网址发送到哪里？我可以从菜单项中完成。

<md-sidenav #sidenav mode="side" opened="true" class="app-sidenav"> 
    <md-nav-list> 
    <button md-list-item>Book Choices</button> 
    <button md-button> 
     <span md-list-item 
     [mdMenuTriggerFor]="amazon">Stores</span></button> 
    </md-nav-list> 
</md-sidenav> 

<md-menu #amazon> 
    <button md-button> 
    <span md-menu-item> 
    <span (click)="'http://amazon.com'">Amazon</span> 
    </span> 
    </button> 
</md-menu>

答

这个东西(click)="'http://amazon.com'"什么都不做，因为你只是传递一个字符串。

你试过(click)="window.open('http://amazon.com', '_blank')"？

或创建一个具有window.open(parameter)

openlink(url: string) 
{ 
    window.open(string, "_blank"); 
} 

// HTML attribute 
(click)="openlink('http://amazon.com')"

让我试试吧。我抱怨冒号时会用单引号。谢谢 –

不幸的是这些工作都没有。点击被忽略，我不知道为什么。 –

尝试将（单击）atritube移动到它的父'md-nav-item'，如果没有，则单击'md-button'。我认为如果你把（click）属性放在'md-button'上，它会起作用。 – masterpreenz

答

您不能导航到使用此表达(click)="'http://amazon.com'" URL的功能。您需要使用window.location.href或window.open方法。这里是你如何能做到这一点：

<md-menu #amazon> 
    <button md-button> 
    <span md-menu-item> 
    <span (click)="gotoUrl('http://www.amazon.com')">Amazon</span> 
    </span> 
    </button> 
</md-menu>

在你的打字稿代码

，定义gotoUrl()方法：

gotoUrl(url:string){ 
    window.location.href=url; 
}

如果你想在浏览器的新标签页中打开链接

，然后用这个代码：

gotoUrl(url:string){ 
    window.open(url, "_blank"); 
}

答

因此，尽管你可以使用（点击）在角事件，如果你需要做的就是导航到你总是可以只使用好老HTML和一个锚链接另一个URL。如果这一切你在寻找保持简单

<md-menu #amazon> 
    <button md-button> 
    <a md-menu-item href="http://amazon.com"> 
    Amazon 
    </a> 
    </button> 
</md-menu>

如果你仍然想使用一个点击就可以了，下面的答案是正确的，它只是有一个错字

所以在您的组件添加一个方法类似：

goToUrl(url: string) { 
    window.open(url); 
}

，然后在视图

<md-menu #amazon> 
    <button md-button> 
     <span md-menu-item (click)="goToUrl('http://amazon.com')"> 
     Amazon 
     </span> 
    </button> 
</md-menu>

点击子菜单，在侧边栏，请与材料设计的URL采用了棱角分明4

相关推荐