Bilinen bir özellik olmadığı için 'routerLink'e bağlanılamıyor

Son zamanlarda, angular 2 ile oynamaya başladım. Şimdiye kadar harika. Bu yüzden, kullanmayı öğrenmek adına kişisel bir demo projesi başlattım angular-cli.

Temel yönlendirme kurulumuyla, şimdi başlıktan bazı yollara gitmek istiyorum, ancak başlığım bir üst öğe olduğundan router-outletbu hatayı alıyorum.

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>

Şimdi kısmen anlıyorum ki, bu bileşen etrafındaki bir sarmalayıcı olduğundan, router-outletbu şekilde erişimin mümkün olmayacağını tahmin ediyorum router. Peki, böyle bir senaryo için dışarıdan navigasyona erişim imkanı var mı?

Gerekirse daha fazla bilgi eklemekten gerçekten mutlu olurum. Şimdiden teşekkür ederim.

Güncelleme

1- Benim package.jsonzaten kararlı @angular/router 3.3.1sürüme sahip. 2- Ana appmodülümde routing-module. Lütfen aşağıya bakın.

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

app-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 {}

Erişmeye çalıştığım rota, başka bir moduleyol olanUsersModule

kullanıcı 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 { }

LayoutModülün parçası olan , ancak yönlendirici modülü hakkında hiçbir fikri olmayan bir bileşenden gezinmeye çalışırken . Hataya neden olan bu mu?

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

Dan gezinmeye çalışıyorum HeaderComponent. Gerekirse daha fazla bilgi vermekten memnuniyet duyarım.

Sen eklemem gerekiyor RouterModuleiçin importsher bir @NgModule()bileşen, bu durumda (herhangi bir bileşen veya yönergesini kullandığınız yere routerLinkve <router-outlet>.

declarations: [] mevcut modülün içinde bilinen bileşenleri, yönergeleri, boruları yapmaktır.

exports: []bileşenleri, direktifleri, boruları, modülleri ithal etmek için kullanılabilir hale getirmektir. declarationsYalnızca eklenenler modüle özeldir. exportsonları halka açık hale getirir.

Ayrıca bkz. Https://angular.io/api/router/RouterModule#usage-notes

Ya rota paketinin dahil edilmesini ya da ana uygulama modülünüze yönlendirici modülünü dahil etmiyorsunuz.

Package.json dosyanızın şunlara sahip olduğundan emin olun:

"@angular/router": "^3.3.1"

Ardından app.modülünüzde yönlendiriciyi içe aktarın ve yolları yapılandırın:

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

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

Güncelleme :

AppRoutingModule'u içe aktarmalarda ilk olacak şekilde taşıyın:

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

Aynı hatayı aldığım ancak sadece bir kukla olduğum başka bir durum ekleyeceğim. [routerLinkActiveOptions]="{exact: true}"Henüz eklemeden ekledim routerLinkActive="active".

Yanlış kodum

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

ne zaman olmalıydı

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

Sahip olmadan, sahip routerLinkActiveolamazsın routerLinkActiveOptions.

Çalışması gerektiğinde başka hiçbir şey çalışmadığında, hizmeti yeniden başlatın. Bu tür böcekleri bulmak üzücü.

Benim durumumda, yeni oluşturduğum bileşeni RouterModule'a aktarmam gerekiyor

{path: 'newPath', component: newComponent}

Ardından app.moduleyönlendiriciyi içe aktarın ve yolları yapılandırın:

{RouterModule} modülünü '@ angular / router'dan içe aktarın;

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

Umarım bu birisine yardımcı olur !!!

Sen eklemeniz gerekir RouterMoudleiçine importsiçeren modülünün bölümleri Headerbileşenini