क्योंकि यह एक ज्ञात संपत्ति नहीं है, 'रूटरलिंक' को बांध नहीं सकते

Question

हाल ही में, मैंने कोणीय 2 के साथ खेलना शुरू किया है। यह अब तक का कमाल है। इसलिए, मैंने सीखने का उपयोग करने के लिए एक डेमो व्यक्तिगत परियोजना शुरू की है angular-cli।

मूल रूटिंग सेटअप के साथ, मैं अब हेडर से कुछ मार्गों पर नेविगेट करना चाहता हूं, लेकिन चूंकि मेरा हेडर माता-पिता का है router-outlet, इसलिए मुझे यह त्रुटि मिलती है।

app.component.html

<app-header></app-header> // Trying to navigate from this component
    <router-outlet></router-outlet>
<app-footer></app-footer>

header.component.html

  <a [routerLink]="['/signin']">Sign in</a>

अब मैं आंशिक रूप से समझता हूं कि मुझे लगता है कि चूंकि यह घटक एक आवरण है, router-outletइसलिए इसके आसपास पहुंच संभव नहीं है router। तो, क्या इस तरह के परिदृश्य के लिए बाहर से नेविगेशन एक्सेस करने की संभावना है?

अगर जरूरत पड़ी तो मुझे और भी जानकारी जोड़कर खुशी होगी। पहले ही, आपका बहुत धन्यवाद।

अपडेट करें

1- मेरे पास package.jsonपहले से ही स्थिर @angular/router 3.3.1संस्करण है। 2- मेरे मुख्य appमॉड्यूल में, मैंने आयात किया है routing-module। कृपया नीचे देखे।

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from  './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(),
    LayoutModule,
    UsersModule,
    AppRoutingModule  --> This is the routing module. 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

एप्लिकेशन-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './users/signin/signin.component';
import { PageNotFoundComponent } from './shared/components/not-found.component';

const routes: Routes = [
{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {}

जिस मार्ग पर मैं पहुँचने का प्रयास कर रहा हूँ, moduleवह दूसरे से मिला हैUsersModule

उपयोगकर्ता के routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SigninComponent } from './signin/signin.component';

const usersRoutes: Routes = [
  { path: 'signin',  component: SigninComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(usersRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class UsersRoutingModule { }

जब मैं एक ऐसे घटक से नेविगेट करने की कोशिश कर रहा हूं जो Layoutमॉड्यूल का हिस्सा है , लेकिन राउटर मॉड्यूल की कोई धारणा नहीं है। क्या वह त्रुटि पैदा कर रहा है।

Layout.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [HeaderComponent, FooterComponent],
  exports: [HeaderComponent, FooterComponent]
})
export class LayoutModule{}

मैं से नेविगेट करने की कोशिश कर रहा हूँ HeaderComponent। जरूरत पड़ने पर और जानकारी देने में मुझे खुशी होगी।

Comments

अपने ऐप के रूट पर रूटमॉडल आयात करें, और

— npm

हाँ मेरे पास नवीनतम स्थिर संस्करण है।

— उमैर सरफराज

क्या आपने उन सभी मॉड्यूल्स RouterModuleको भी जोड़ा है imports: []जहाँ आप उपयोग करते हैं routerLinkया<router-outlet>

— Günter Zöchbauer

@Uair मॉड्यूल ऑर्डरिंग आयात में महत्वपूर्ण है, AppRoutingModuleइससे पहले आगे बढ़ेंLayoutModule

— harshes53

@ harshes53 मुझे नहीं लगता कि यह सच है।

— गुंटर Zöchbauer

Answer 1

आप जोड़ने की जरूरत RouterModuleके लिए importsहर की @NgModule()जहां घटकों से किसी भी घटक या निर्देश का उपयोग (इस मामले में routerLinkऔर <router-outlet>।

declarations: [] वर्तमान मॉड्यूल के अंदर ज्ञात घटकों, निर्देशों, पाइपों को बनाना है।

exports: []मॉड्यूल आयात करने के लिए उपलब्ध घटक, निर्देश, पाइप बनाने के लिए है। declarationsकेवल मॉड्यूल में निजी तौर पर क्या जोड़ा जाता है। exportsउन्हें सार्वजनिक करता है।

Https://angular.io/api/router/RouterModule#usage-notes भी देखें

Comments

@ रूटर कई बार RouterModule आयात करना ठीक है? उदाहरण के लिए यदि मैं चाइल्डमॉडल में राउटरलिंक का उपयोग करना चाहता हूं, तो मुझे राउटरमॉड्यूल को बाल मॉड्यूल में आयात करने की आवश्यकता है, जबकि यह रूट ऐप मॉड्यूल द्वारा पहले ही आयात किया जा चुका है ...

— ओलिवियर बोइस नो

हां, यह केवल एक बार निर्मित आउटपुट में शामिल होगा।

— गुंटर ज़ोचबॉयर

ठीक है, लेकिन मुझे लगता है कि हमें forRootकेवल एक बार विधि को कॉल करने के लिए ध्यान रखने की आवश्यकता है , बच्चों के मॉड्यूल को केवल RouterModule आयात करना चाहिए, बिना forRoot विधि को कॉल किए

— ओलिवियर बोइसे

मुझे लगता है कि यह निर्भर करता है कि क्या forRootकरता है। जब forRootकई बार अहंकारी प्रदाता होते हैं, तो परिणाम वैसा ही होता है जैसा कि केवल एक बार किया जाता है। यदि आप अन्य कार्य करते हैं तो यह भिन्न नहीं हो सकता है।

— गुंटर ज़ोचबॉयर

इस उत्तर के लिए धन्यवाद! मेरे मामले में ऐप ने काम किया, लेकिन परीक्षण विफल रहे। राउटरलिंक का उपयोग करने वाले प्रत्येक घटक के लिए समाधान राउटरटाइस्टिंग मोड में परीक्षण करना था।

— स्लाविक शिनकेनको

Answer 2

आप अपने मुख्य ऐप मॉड्यूल में राउटर मॉड्यूल सहित या तो रूट पैकेज को शामिल करने से चूक रहे हैं।

सुनिश्चित करें कि आपके package.json के पास यह है:

"@angular/router": "^3.3.1"

फिर अपने app.module में राउटर आयात करें और मार्गों को कॉन्फ़िगर करें:

import { RouterModule } from '@angular/router';

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent}
        ])
    ],

अपडेट :

आयात में पहले AppRoutModule को स्थानांतरित करें:

imports: [
    AppRoutingModule.
    BrowserModule,
    FormsModule,
    HttpModule,
    AlertModule.forRoot(), // What is this?
    LayoutModule,
    UsersModule
  ],

Comments

यह समस्या हल नहीं हुई। क्या आप मेरे अपडेट की जांच कर सकते हैं?

— उमैर सरफराज

@Ben - "forRoot ()" का अर्थ है कि आप एक आयातित मॉड्यूल पर परिभाषित विधि को कॉल कर रहे हैं जो मॉड्यूल के लिए कॉन्फ़िगरेशन या सेटअप चलाता है। आप कस्टम मॉड्यूल में "forChild ()" जैसी विधि को भी परिभाषित कर सकते हैं और इसे कॉल कर सकते हैं, यदि आप चाहते थे। इस पद्धति का उपयोग किसी सेवा के लिए प्रदाता स्थापित करने जैसे कार्यों के लिए किया जाता है। यह भी है कि आपको कोणीय में एक सिंगलटन सेवा कैसे मिलती है। Angular.io/guide/singleton-services

— 23

Answer 3

मैं एक और मामला जोड़ूंगा जहां मुझे वही त्रुटि मिल रही थी लेकिन सिर्फ एक डमी थी। मैंने [routerLinkActiveOptions]="{exact: true}"अभी तक बिना जोड़े ही जोड़ा था routerLinkActive="active"।

मेरा गलत कोड था

<a class="nav-link active" routerLink="/dashboard" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

जब होना चाहिए था

<a class="nav-link active" routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
  Home
</a>

बिना routerLinkActive, आपके पास नहीं हो सकता routerLinkActiveOptions।

Answer 4

जब काम नहीं करना चाहिए तो कुछ और काम करें, फिर से एनजी सर्व करें। इस तरह के कीड़े मिलना दुखद है।

Comments

वहाँ एक बग है अनुरूप कर सकते हैं। मैं सिर्फ डिस्टर्ब फोल्डर की सामग्री को हटाता रहा और पुनर्निर्माण करता रहा। अंत में यह काम किया। App.component.ts में हर घटक के लिए एक लिंक जोड़ने का प्रयास करें। अगर वह काम नहीं करता है तो आपका एकमात्र विकल्प प्रार्थना और उपवास है।

— सैम

Answer 5

मेरे मामले में मुझे बस अपने नए बनाए गए घटक को RouterModule पर आयात करना होगा

{path: 'newPath', component: newComponent}

फिर अपने app.moduleआयात में राउटर और मार्गों को कॉन्फ़िगर करें:

'@ कोणीय / राउटर' से {RouterModule} आयात करें;

imports: [
        RouterModule.forRoot([
            {path: '', component: DashboardComponent},
            {path: 'dashboard', component: DashboardComponent},
            {path: 'newPath', component: newComponent}
        ])
    ],

आशा है कि यह किसी एक को मदद करता है !!!

Answer 6

आपको घटक वाले मॉड्यूल के वर्गों RouterMoudleमें जोड़ना होगाimportsHeader