单击子菜单，在侧边栏中，转到 url with Material Design using Angular 4

Question

我正在编写一本书 collection 程序，我有一个静态 sidebar，它有选项，当您单击某些选项时，它会将您带到 url .

我无法让 转到 url 部分正常工作。

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

可能有错别字，因为代码在不同的计算机上，所以我输入了这个。基本上，我如何获得子菜单会将我发送到 url 的位置？我可以从菜单项中完成。

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

Answer 1

这个东西 (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')"

Answer 2

您无法使用此表达式 (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;
}

如果您想在浏览器的新标签页中打开 url，请使用此代码：

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

Answer 3

因此，虽然您可以在 angular 中使用（单击）事件，但如果您需要做的只是导航到另一个 url，您始终可以使用旧的 html 和主播 link。如果这就是您想要的，请保持简单

<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 with Material Design using Angular 4

Clicking on submenu, in a sidebar, go to a url with Material Design using Angular 4

html

material-design-lite

angular