En cliquant sur le sous-menu, dans une barre latérale, aller à un URL avec Material Design en utilisant Angular 4

Question

Je travaille sur un programme de collection de livres et j'ai un sidebar statique qui aura des options et quand vous cliquez sur certaines des options qu'il envoie vous à une url.

Je ne peux pas obtenir le allant à l'adresse partie au travail.

Donc, j'ai juste un sidenav, puis un élément de menu appelé Store, puis un sous-menu avec un élément appelé Amazon.

Il peut y avoir des fautes de frappe, car j'ai tapé ceci car le code est sur un autre ordinateur. Fondamentalement, comment puis-je obtenir où un sous-menu va m'envoyer à une URL? Je peux le faire à partir de l'élément de menu.

<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

cette chose (click)="'http://amazon.com'" ne fait rien puisque vous venez de passer une chaîne.

avez-vous essayé (click)="window.open('http://amazon.com', '_blank')"?

ou créer une fonction qui fait le window.open(parameter)

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

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

Answer 2

Vous ne pouvez pas accéder à une URL en utilisant cette expression (click)="'http://amazon.com'". Vous devez utiliser la méthode window.location.href ou window.open. Voici comment vous pouvez faire:

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

dans votre code dactylographiée, définir la méthode gotoUrl():

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

si vous voulez ouvrir l'URL dans un nouvel onglet dans le navigateur, utilisez cette Code:

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

Answer 3

Ainsi, alors que vous pouvez utiliser (cliquer) événements angulaire, si tout ce que vous devez faire est de naviguer vers une autre URL, vous pouvez toujours utiliser un bon vieux HTML et un lien d'ancrage. Si c'est tout que vous cherchez rester simple

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

Si vous voulez continuer à utiliser un clic, vous pouvez, et la réponse ci-dessous était correcte, il avait juste une faute de frappe

ajouter donc une méthode dans votre composant comme :

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

et puis dans votre vue

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