Angular路由将导航到新的视图,但它将呈现在以前视图的容器内?
创始人
2024-10-28 02:00:29
0

这个问题的解决方案是对于新的视图,使用组件来渲染,而不是使用以前视图的容器。

在你的Angular应用中,你需要确保你有一个元素。这个元素将是Angular路由器来渲染它的视图的地方。

你可以将元素放在你想要渲染视图的地方。例如,如果你有一个名为home的路由,你可以在你的app.component.html文件中放置以下内容:

当用户通过路由导航到home路由时,路由器将渲染与该路由匹配的组件,并将其放置在元素中。

以下是一个样例,其中定义了一个名为app-routing.module.ts的路由模块并使用渲染它:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'other', component: OtherComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html中使用


通过这种方式,当用户导航到不同的路由时,新的组件将被渲染并显示在中。

相关内容

热门资讯

第五分钟脚本!微乐小程序辅助器... 第五分钟脚本!微乐小程序辅助器,微乐小程序黑科技,指南教程(有挂软件)-哔哩哔哩1、这是跨平台的微乐...
第4分钟辅助!微信小程序游戏破... 第4分钟辅助!微信小程序游戏破解微乐辅助,微乐小程序黑科技,模板教程(有挂平台)-哔哩哔哩1、完成微...
三分钟插件!微乐自建房辅助软件... 三分钟插件!微乐自建房辅助软件下载,微乐小程序免费黑科技,机巧教程(有挂平台)-哔哩哔哩一、微乐自建...
1分钟插件!小程序微乐辅助器2... 1分钟插件!小程序微乐辅助器2.0免费,微乐小程序免费黑科技,法门教程(有挂工具)-哔哩哔哩1、完成...
第二分钟安装!微乐小程序辅助器... 第二分钟安装!微乐小程序辅助器免费,微乐小程序黑科技,模板教程(有挂修改器)-哔哩哔哩1、不需要AI...
第3分钟辅助!微信小程序微乐修... 第3分钟辅助!微信小程序微乐修改器,微乐小程序黑科技,教程书教程(有挂辅助)-哔哩哔哩1、起透看视 ...
第7分钟辅助!微乐小程序自建房... 您好,微乐小程序自建房插件免费这款游戏可以开挂的,确实是有挂的,需要了解加去威信【485275054...
五分钟插件!微信小程序微乐辅助... 五分钟插件!微信小程序微乐辅助器教程图片,微乐小程序免费黑科技,模块教程(有挂修改器)-哔哩哔哩1、...
七分钟安装!微乐小程序多功能修... 七分钟安装!微乐小程序多功能修改器,微乐小程序黑科技,办法教程(有挂工具)-哔哩哔哩1)微乐小程序多...
第九分钟脚本!微乐小程序免费黑... 第九分钟脚本!微乐小程序免费黑科技5个玩家常用方法,微乐小程序黑科技,阶段教程(有挂插件)-哔哩哔哩...