html DOMからコンポーネントへ直接ルーティング

Question

htmlのテンプレートからコンポーネントにルーティングしようとすると、私はさまざまなアプローチを試みましたが、機能しません。

htmlからテンプレートまたはurlTemplate（スクリプトのタグに値を設定）のコンポーネント間をルーティングできます。しかし、私はhtmlからコンポーネントにリンクできません。ここで

はアイデアです：

index.htmlを

<a href="my_angular_component">My_something</a> 

my_component.ts

@Component({ 
    selector: 'myComponent-list', 
    template: ` 
    <h2>myComponents</h2> 

    <ul> 
     <li *ngFor="let myComponent of myComponents"> 
     {{myComponent.name}} 
     </li> 
    </ul> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

私は、次の方法を試してみました：

ROUを使用してtes'sコンポーネントと[routerLink]属性：

routes.ts私はrouterLinkを使用can'tので、働いていない

export const MyComponentAppRoutes = [ 
    { path: 'myComponent', component: my_component }, 
] 

index.htmlを

<a [routerLink]="['/myComponent']">My_something</a> 

直接、HTML。

<script> 
     var app = angular.module("HelloWorld", ["ngRoute"]); 
     app.config(function($routeProvider) { 
      $routeProvider 
       .when("/cartelera", { 
-- HOW CAN CALL MY COMPONENT HERE? NOT TEMPLATE DIRECTLY BECAUSE I WANT TO INJECT A SERVICE. 
-- NOT A URLTEMPLATE FOR THE SAME REASON. 
       }); 
      }); 
     </script> 

は最後に、私はそれが動作するイベント、doesntが、ただ、自身の定義からrouteLinkを使用するため、mylinkと呼ばれるコンポーネントを定義しますが、：スクリプトでHTMLからの直接ルートプロバイダーをdefinying

もう一つ、正しく見える。私が持っているすべてのリンクのコンポーネントを定義する必要がありますか？

私はそれを得ることができません。 ：S

おかげで仲間... :)

Answer 1

あなたがすることはできません。このコードが実行されると、Angularはまだ実行されていません。

window.someNameに値を割り当て、次にコンポーネント内の値window.someNameを割り当てることができます。

実際function($routeProvider) { ... }が角度の後に呼び出され、コンポーネントが初期化されている場合、あなたはスクリプトタグの呼び出しからwindow.someNameまでと比べて、あなたのコンポーネントのメソッドを割り当てることができますにwindow.someName(someParam)

も参照してくださいAngular2 - how to call component function from outside the app

別のアプローチは次のようになりスクリプトメソッドからイベント

var event = new Event('my-event'); 
// or 
var event = new CustomEvent('my-event', {'detail': someData}); 
window.dispatchEvent(event); 

とあなたの角度成分に

@HostListener('window:my-event', ['$event']) 
myEventHandler(event) { 
    console.log(event); 
    // or 
    console.log(event.detail); 
} 

も参照してくださいhttps://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events