Question

我一直在开发一个.net核心应用程序，我现在尝试将angular2添加到项目中，我对app.component模板出现删除所有内容的原因感到困惑即使在检查页面时，从页面，原始内容确实存在。我的理解是app.component以与angular1中的以下相同的方式提供了一个入口点：

var app = angular.module('myApp', []);

<html ng-app="app">....</html>

无论如何我可以使用angular2而不必放弃我的剃刀视图，或者我将不得不引导每个视图？

Answer 1

在angular 2中，你需要有一个Root组件，它将用于自举，并将在index.html中呈现。其他组件，服务需要在modules.ts中导入和声明例如：下面的示例应用程序有三个组件：父，应用程序和新应用程序。在modules.ts文件中，您需要导入所有组件并在NgModules中声明。在它下面是bootstrapping Parent组件。

<强> Modules.ts

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

import { ParentComponent } from './parent.component';
import { AppComponent } from './app.component';
import { NewAppComponent } from './newapp.component';

@NgModule({
declarations: [
ParentComponent, AppComponent, NewAppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
  { path: 'app', component: AppComponent },
  { path: 'newapp', component: NewAppComponent }
],{ useHash: true })
],
 providers: [],
 bootstrap: [ParentComponent]
})
export class AppModule { }

<强> Parent.Component.ts

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

@Component({
  selector: 'parent-root',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
}

<强> Parent.Component.Html

<h1>Test</h1>  
<ul>
    <li><a href="/index.html#/app">App</a></li>
    <li><a href="/index.html#/newapp">New App</a></li>
    </ul>
   <router-outlet></router-outlet>

<强>的index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Routingapp</title>
  <base href="/index.html">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <parent-root>Loading...</parent-root>
</body>
</html>

父组件仅用于引导应用程序（可以将其视为应用程序的主页）。无需引导每个视图/组件。

Angular2 app.component从页面中删除所有内容

1 个答案: