angular router

最新推荐文章于 2025-01-07 09:20:15 发布

转载最新推荐文章于 2025-01-07 09:20:15 发布 · 391 阅读

文章标签：

#angular router

angular 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Angular框架实现的简单应用案例，包括了登录页面、注册页面及导航功能的实现方式。通过定义不同的路由路径，实现了不同页面间的跳转，并展示了如何利用Angular的Router进行页面切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

@Component({
    selector: 'login',
    template: `
        <h1>这是登录页面</h1>
    `
})

export class LoginComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

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

@Component({
    selector: 'register',
    template: `
        <h1>这是注册页面</h1>
    `
})

export class RegisterComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

app.componet.ts

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

@Component({
  selector: 'my-app',
  template: `
      <h1>Hello {{name}}</h1>
      <router-outlet></router-outlet>
  `,
})
export class AppComponent  { name = 'New Year'; }

app.router.ts

//a-module-routing
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './demo15/login.component';
import { RegisterComponent } from './demo15/register.component';

const routes: Routes = [
  { path: '', component: LoginComponent},
  { path: 'myLogin', component: LoginComponent },
  { path: 'myRegister', component: RegisterComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], //注意forRoot和footChild的区别
  exports: [RouterModule],
})
export class AppRoutingModule { }

app.module.ts

import {AppRoutingModule}from'./app.router';

import {LoginComponent}from'./demo15/login.component';
import {RegisterComponent}from'./demo15/register.component';
@NgModule({
providers:[HeartService,MyHttpService],
imports: [ BrowserModule,FormsModule,HttpModule,AppRoutingModule ],

补：

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
    selector: 'login',
    template: `
        <h1>这是登录页面</h1>
        <button (click)="jumpToRegister()">没有账号，去注册</button>
        <a routerLink="/myRegister">注册</a>
    `
})

export class LoginComponent implements OnInit {
    constructor(private myRouter:Router) { }

    ngOnInit() { }

    jumpToRegister(){
        this.myRouter.navigateByUrl('myRegister');
    }
}

main.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
    selector: 'main',
    template: `
        <h1>Main</h1>
        <button (click)="backToPre()">返回上一页</button>
    `
})

export class MainComponent implements OnInit {
    constructor(private myLocation:Location) { }

    ngOnInit() { }

    backToPre(){
        this.myLocation.back();  //还有forword函数
    }
}

补：

app.route.ts

{ path: '**',
component: NotFoundComponent }

notfound.component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
    selector: 'notfound',
    template: `
        <h1>您访问的资源不存在</h1>
    `
})

export class NotFoundComponent implements OnInit {
    constructor(private myRouter:Router) { }

    ngOnInit() {
        setTimeout(()=>{
            this.myRouter.navigateByUrl('myLogin'); 
        },2000);
    }
}