2017-08-31 2 views
0

Eine Liste der Namen ist ausgefüllt und während Sie auf diesen Namen klicken, leitet es zur Google-Suche um. Ich brauche Hilfe beim Hinzufügen einer benutzerdefinierten Daten name zu der URL durch HTML, die den Besucher mit einem automatisch gesuchten Ergebnis der Google-Suche umleiten wird.Umleiten zu URL mit zusätzlichen benutzerdefinierten Daten in AngularDart

app_component.html

 <h1>{{title}}</h1> 

    <h2>My favorite hero is: {{myHero.name}}</h2> 

    <p>Heroes:</p> 

    <ul> 

     <li *ngFor="let hero of heroes"> 

      <a href="https://www.google.co.in/search?q=">{{ hero.name }}</a> 

     </li> 

    </ul> 

app_component.dart

 import 'package:angular2/angular2.dart'; 
    import 'src/hero.dart'; 


    @Component(
     selector: 'my-app', 
     template: '''app_component.html''', 

     directives: const [CORE_DIRECTIVES],) 

     class AppComponent { 
      String title = 'Tour of Heroes'; 
      List<Hero> heroes = [ 
     new Hero(1, 'Windstorm'), 
       new Hero(13, 'Bombasto'), 
       new Hero(15, 'Magneta'), 
       new Hero(20, 'Tornado') 
     ]; 
      Hero get myHero => heroes.first; 
    } 

Antwort

1

gleiche Art und Weise, wie Sie Ihre Daten in HTML binden, können Sie binden es HTML-Attribut tun, zum Beispiel. das sollte funktionieren.

<a href="https://www.google.co.in/search?q={{ hero.name }}">{{ hero.name }}</a> 

By the way, sollten Sie das target="_blank" Attribut auf den Link als auch hinzufügen, so wird der Benutzer die Suche in einem neuen Tab öffnen und Ihre App werden auf gehen nach wie vor.

+0

Können Sie mir einfach helfen, wie kann ich es auf eine Material-Schaltfläche implementieren –

+0

Laut der API-Dokumentation der Schaltfläche (https://material.angular.io/components/button/overview) sollte es so etwas wie ' click me! '. – HoBi

+0

danke, aber ich möchte es auf Klicken Sie auf mich wie ich benutze angular_components. –

Verwandte Themen