1.我们可新建一个路由项目 ng new 项目名称 --routing 我们可以看到路由项目有app-routing.modules.ts 路由配置中主要有五个参数: 我们新建好home组件后在app-routing.modules.ts中配置路路径 如上图所示意思就是启动项目后比如localhost:8008/ 根据 知道跳转到home路径由 配置可以看出home路径下展示的是
<app-body></app-body> 3: AppComponent <router-outlet /> 4:body 组件下 <router-outlet></router-outlet> 5:app-routing.module.ts 路由内容: import { NgModule }from'@angular/core'; import { RouterModule, Routes }from'@angular/router'; import { HomeComponent }from"./components/home/h...
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRouting...
然后就可以看到带routing的Module了。 3.在moudle中创建组件 这一步中,我们需要在module中创建两个组件,首先cd 到我们刚才创建的city 文件夹目录下,然后执行下面的指令创建组件 ng gcshandong 和 ng gcbeijing 再然后,我们在city-routing.module.ts中引入刚才创建的两个组件 import{NgModule}from'@angular/core'; ...
我们定义了主模块(AppModule),在main.ts中通过platformBrowserDynamic().bootstrapModule(AppModule)启动,并且我们在主模块中加载我们需要的路由模块(AppRoutingModule)。 main.ts import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import...
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; // 引入 FormsModule import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ...
路由(Routing)基本上意味着在页面之间导航,现在让我们创建一个组件,看看如何在其上使用路由。如下所示- app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; ...
第二步:在父组件app.component.html中的子组件标签<app-child>中定义属性[childMsg](子组件接收数据变量)来绑定父组件的数据parentMsg。 <app-child [childMsg]="parentMsg"></app-child> 第三步:在子组件child.component.ts中引入@Input()装饰器,修饰childMsg接收父组件的传值。
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { SpaAngularEditableComponentsModule } from '@adobe/aem-angular-editable-components'; import { AppRoutingModule } from './app-routing.module'; ...
使用Visual Studio Code 将app.routes.ts重命名为app-routing.module.ts,并更新整个应用程序中app.routes.ts的所有引用。 使用Visual Studio Code 将app.config.ts重命名为app.module.ts,并更新整个应用程序中app.config.ts的所有引用。 完成这些步骤后,项目结构应如下所示: ...