從html DOM直接路由到組件

試圖從html的模板路由到組件，我嘗試了不同的方法，但他們不工作。從html DOM直接路由到組件

我可以在組件之間進行路由，從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] 
})

我試了下方法：

使用糅tes's組分和[routerLink]屬性：

routes.ts

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

的index.html

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

不工作，因爲我不能在使用routerLink HTML，直接。

再一個，通過腳本直接從HTML definying路線提供商：

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

最後，我定義的組件調用myLink的，只是使用routeLink從本身的定義，但是，事件它的工作原理，犯規看起來正確。我有沒有爲每個鏈接定義一個組件？

我無法得到它。：S

感謝隊友... :)

來源

2017-01-19 Elias MP

你不能。當這個代碼被執行時，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

來源

2017-01-19 09:58:14

嗯......謝謝@君特Zöchbauer。那麼，你推薦我用什麼方法來實現這個功能？ –

如果您確定Angular已經運行並且組件已初始化，那麼當調用該函數時，我會使用剛剛添加的事件方法。 –

再次感謝。我會嘗試一下，我會讓你知道的。我也接受這個問題。乾杯隊友... :) –

從html DOM直接路由到組件

回答

相關問題