कोणीय 2 राउटर लिंक काम नहीं कर रहा है

Question

मेरा राउटर लिंक मूल घटक से काम करता है और यदि मैं बाल घटक के लिंक को स्थानांतरित करता हूं तो वही लिंक काम नहीं कर रहा है। प्लंकर कोड कामकाजी लिंक और गैर काम करने वाला लिंक दिखाता है। पहले ही, आपका बहुत धन्यवाद। नीचे काम नहीं कर रहे लिंक है।

//our root app component 
import {Component} from '@angular/core' 

@Component({ 
    selector: 'my-menu', 
    template: ` 
    <div> 
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a> 
    </div> 
`, 
}) 
export class AppLayout {} 

Plunker code with issue

Answer 1

आप अपने AppLayoutModule में RouterModule आयात करना चाहिए इस प्रकार है तो यह दिखता है:

import {NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {AppLayout} from './layout.component'; 
import {RouterModule} from '@angular/router'; 

@NgModule({ 
    imports: [ BrowserModule, RouterModule ], 
    declarations: [ AppLayout ], 
    exports: [ AppLayout ] 
}) 

export class AppLayoutModule {} 

के बिना यह घटक नहीं पता था कि क्या routerLink है और यह संकलन नहीं है सही करने के लिए href विशेषताएँ।

routerlink के लिए अपडेट किया गया Plunker here

Answer 2

आदेश में काम करने के लिए, आप घटक को रूटर आयात करना होगा जहां

उदाहरण

Import {Component} from '@ angular/core'; 
Import {Router} from '@ angular/router'; 

@Component ({ 
Selector: 'my-menu', 
template: 
<Div> 
<a [routerLink]=["/comp11"]> Crisis Center </a> 
<a <routerLink]=["/comp12"]> Heroes </a> 
<a [routerLink]=["/comp21"]> Heroes </a> 
<a <routerLink]=["/comp22"]> Heroes </a> 
</ Div> 
,}) 
Export class AppLayout{} 

काम कर रहे हैं धन्यवाद!

Answer 3

यदि यह एक स्टैंडअलोन घटक था जो मॉड्यूल में आयात किया गया था तो आप अपने मॉड्यूल के आयात में राउटर मॉड्यूल भी जोड़ सकते हैं। मैं अपनी फाइल में मॉड्यूल घोषणाएं करना चाहता हूं, इसलिए यहां एक समाधान ऐप-मॉड्यूल होगा।

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import {RouterModule} from '@angular/router'; 
import {AppLayoutModule} from '...'; <--could also be a component 

@NgModule({ 
    declarations: [ 
     AppComponent 
    ], 
    imports: [ 
     AppLayoutModule, 
     BrowserModule, 
     RouterModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

केवल एक चीज आप के बारे में सुनिश्चित होना चाहिए कि RouterModule मॉड्यूल routerLink निर्देश का उपयोग करता है, या तो मॉड्यूल फ़ाइल या घटक फ़ाइल में में आयात किया जाता है।