該選擇「登錄應用內」沒有匹配的元件2

Question

我在角2的成分如下所示

login.component.ts

import { Component } from '@angular/core'; 
import { LoginViewModel } from "../ViewModel/Login.ViewModel"; 
import { LoginService } from "../Service/Login.Service"; 
@Component({ 
    selector: 'login-app', 
    templateUrl: 'Account/partialLogin', 
    providers: [LoginViewModel, LoginService] 
}) 

export class LoginComponent { 

    constructor(private loginservicemodel: LoginService, private model: LoginViewModel) { 
     this.model.userName = 'erere@ada.com'; 
     this.model.password = "test anand"; 

    } 

    save(modelValue: LoginViewModel, isValid: boolean) { 
     if (isValid) { 
      this.loginservicemodel.loginHttpCall(); 
     } 
    } 

} 

Home.Component.ts

import { Component } from '@angular/core'; 


@Component({ 
    selector: 'Home-app', 
    template: ` 
    <h1>Angular Router</h1> 
    <nav> 
     <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> 
     <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 
    </nav> 
    <router-outlet></router-outlet> 
    ` 
}) 

export class HomeComponent { 


} 

的appModule.ts

import { NgModule } from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { FormsModule } from '@angular/forms'; 
    import { RouterModule, Routes } from '@angular/router'; 
    import { HttpModule, JsonpModule } from '@angular/http'; 

    import { LoginComponent } from "./Components/login.Component"; 
    import { HomeComponent } from "./Components/home.component"; 

    const appRoutes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'Account/Login', component: LoginComponent } 

]; 


@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule, JsonpModule, RouterModule.forRoot(appRoutes)], 
    declarations: [LoginComponent, HomeComponent], 
    bootstrap: [HomeComponent] 
}) 
    export class AppModule { } 

login.cshtml

@{ 
    ViewData["Title"] = "Login"; 
} 

<login-app>looding...</login-app> 

partialLogin.cshtml

<router-outlet></router-outlet> 
<p>THis is test</p> 

路由

app.UseMvc(routes => 
      { 
       routes.MapRoute(
        name: "default", 
        template: "{controller=Home}/{action=Index}/{id?}"); 

       routes.MapRoute(
        name: "spa-fallback", 
        template: "{*url}",defaults: new { controller = "Home", action = "Index" }); 
      }); 

我有使用角2路由，你可以在appmodule.ts.If看到我瀏覽主頁I，E 首頁/索引我會得到一個錯誤的選擇「的登錄，應用」沒匹配任何元素，當我導航到帳戶/登錄我會得到一個錯誤爲選擇器「家庭應用」沒有匹配任何元素。我知道appmodule的條件不起作用。我該如何做這項工作。請任何人都可以解決這個問題

Answer 1

你得到這個錯誤，因爲你沒有在你的ngModule文件中導入你所有的其他組件。加上他們的聲明就像你已經導入LoginComponent

@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule, JsonpModule], 
    declarations: [LoginComponent],<-- add all your component here 
    bootstrap: [LoginComponent] 
}) 
export class AppModule { } 

Answer 2

下面是如何在Angular2路由添加一個例子：

 //Create new app.module.ts file 
     import { ModuleWithProviders } from '@angular/core'; 
     import { Routes, RouterModule } from '@angular/router'; 


     import { LoginComponent } from './Components/login.Component'; 

     const appRoutes: Routes = [ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'login', component: LoginComponent} 
     ]; 

     export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 



     //Import the above define route in your App module 
     import { NgModule } from '@angular/core'; 
     import { BrowserModule } from '@angular/platform-browser'; 
     import { FormsModule } from '@angular/forms'; 
     import { HttpModule, JsonpModule } from '@angular/http'; 
     import { LoginComponent } from "./Components/login.Component"; 

     //Import your route file 
     import { routing } from './app.routing'; 

     @NgModule({ 
      imports: [BrowserModule, FormsModule, HttpModule, JsonpModule,routing,], 
      declarations: [LoginComponent], 
      bootstrap: [LoginComponent] 
     }) 
     export class AppModule { } 

Answer 3

最後工作code.Call在HTML頁面中各選擇

AppModule.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { RouterModule, Routes } from '@angular/router'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { ModuleWithProviders } from '@angular/core'; 
import { AppComponent} from "./app.component"; 

import { LoginComponent } from "./Components/login.Component"; 
import { HomeComponent } from "./Components/home.component"; 

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'Home/Index', pathMatch: 'full' }, 
    { path: 'Account/Login', component: LoginComponent }, 
    { path: 'Home/Index', component: HomeComponent } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 


@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule, routing], 
    declarations: [AppComponent,LoginComponent, HomeComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

個app.Component.ts

import { Component } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
@Component({ 
    selector: 'main-app', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent { } 

Home.Component.ts

import { Component } from '@angular/core'; 


@Component({ 
    selector: 'Home-app', 
    template: ` 
    <h1>Angular Router</h1> 
    <nav> 
     <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> 
     <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 
    </nav> 

    ` 
}) 

export class HomeComponent { 


} 

login.Component.ts

import { Component } from '@angular/core'; 
import { LoginViewModel } from "../ViewModel/Login.ViewModel"; 
import { LoginService } from "../Service/Login.Service"; 
@Component({ 
    selector: 'login-app', 
    templateUrl: 'Account/partialLogin', 
    providers: [LoginViewModel, LoginService] 
}) 

export class LoginComponent { 

    constructor(private loginservicemodel: LoginService, private model: LoginViewModel) { 
     this.model.userName = 'erere@ada.com'; 
     this.model.password = "test anand"; 

    } 

    save(modelValue: LoginViewModel, isValid: boolean) { 
     if (isValid) { 
      this.loginservicemodel.loginHttpCall(); 
     } 
    } 

}