angular-ui-router 相关问题

角UI-Router最佳实践：在命名视图之间共享数据

角JS Angular 18混合路由

我有一个有效的角度JS/Angular 18混合动力应用程序，但是我要做的是迁移客户用户的路线：

角2-在使用“升级适配器”升级时可以使用新路由器

角JS-在角度材料开关转换事件上更新$ stateparams

我想知道在变更事件之后更新$ stateparams参数的一种方式 我想知道在更改事件之后更新参数的一种方式 $stateParams Controller angular material switchroute.js <section id="app_controls"> <span style="margin-right: 10px;">Ro</span> <md-switch class="md-primary" ng-model = "data.lang" aria-label="Switch language" ng-true-value="'en'" ng-false-value="'ro'" ng-change="setLang(data.lang)" >En</md-switch> <span id="exit"></span> </div> </section> i我无法从控制器访问其他任何内容。 我试图实现的是要有一个语言开关，该开关将更新状态参数 - 我希望它对任何其他状态变化都将保持不变。我也想在更改参数后重新加载此状态。 我怎么能实现？ 基本上，您可以在$ rootscope中引用语言。 完成您的代码，看起来像这样： Controller .controller('homeController', ['$stateParams','$state', '$scope', 'PageProperties', 'loadMyData', function($stateParams, $state, $scope, PageProperties, loadMyData){ //set page elements var properties = PageProperties.setProps("home", loadMyData); $scope.props = properties; $scope.lang; $scope.setLang = function(lang) { $scope.message = lang; }; }]) route.js .state('home', { url: '/home?lang', params: { lang: 'ro'}, templateUrl: 'views/home/home.html', controller: 'homeController',//'homeController' resolve:{ //loadResources e doar o denumire, nu vreun key-word loadResources: ['$ocLazyLoad', function($ocLazyLoad) { // you can lazy load files for an existing module //conteaza ordinea in care le scriu return $ocLazyLoad.load(['pageNavPropsService', 'homeCtrl','homeDirective']); }], loadMyData: ['$stateParams', 'GetDataService', function($stateParams, GetDataService){ //get initial data for states var path = '_global/views/services/json/' + $stateParams.lang + '_data.json'; return GetDataService.getData(path); }] } }) ，也可以在您的$scope中设置默认语言，您可以存储您的语言的默认值。 最终，我已经通过这样的服务完成了此操作： setLang() 在状态下解决： lang

Component TasksComponent 是独立的，不能在 NgModule 中声明

X [错误] TS-996008：组件任务组件是独立的，无法在 NgModule 中声明。您的意思是导入它吗？ [插件角度编译器] src/app/app.module.ts:13:4： 13 │

路由未按预期工作 - 角度 19

我有一个HTML代码： 我有一个HTML代码： <table mat-table [dataSource]="claims" matSort class="mat-elevation-z8"> <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column"> <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ titleCase(column) }}</th> <td mat-cell *matCellDef="let element"> <!-- Add clickable links for Claim Id --> <ng-container *ngIf="column === 'claimID'; else defaultCell"> <a href="#" (click)="onClaimIdClick(element[column])"> {{ element[column] }} </a> </ng-container> <ng-template #defaultCell> {{ getElementValue(element, column) }} </ng-template> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> 它正确加载表格，我已将 click 功能添加到 claimId 列。 TS 代码是： onClaimIdClick(claimId: string): void { console.log('Navigating to:', `/claims-summary/${claimId}`); this.router.navigate(['/claims-summary', claimId]); } 当我点击claimId下的条目时，它会重定向到下一页，但会调用不匹配的路由。这是我的app.routes.ts。 import { Routes } from '@angular/router'; import { LoginComponent } from './components/login/login.component'; import { HomeComponent } from './components/home/home.component'; import { ClaimsSummaryComponent } from './components/claims-summary/claims-summary.component'; import { ClaimsInsightsComponent } from './components/claims-insights/claims-insights.component'; import { ClaimsComponent } from './components/claims/claims.component'; export const routes: Routes = [ { path: '', component: LoginComponent }, // Default route for login { path: 'home', component: HomeComponent }, // route for home { path: 'claims', component: ClaimsComponent }, // route for claims { path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }, // route for claims summary { path: 'claims-insights/:type', component: ClaimsInsightsComponent }, { path: '**', redirectTo: '', pathMatch: 'full' }, // Redirect any unmatched route to error page (Reminder to ask Akanksha to design error page) ]; 如果我在新选项卡中打开新网址 http://localhost:4200/claims-summary/claimId，它会完美加载。但是当我尝试通过 onClick 导航到该页面时，它会重定向到 claim-summaries，但每次都会调用不匹配的路线。我在这里缺少什么？ 而不是 this.router.navigate(['/claims-summary', claimId]); 以下是必要的： this.router.navigate(['/claims-summary', {claimID: claimId}]);

将 Angular 1.x 控制器转换为 TypeScript 时出现问题

TypeScript 新手，并尝试从 js 转换为 ts（使用 Angular 1.x）。这是一个控制器。转换为 ts 时遇到问题。 “模块”是 ui-router 状态程序上的自定义数据元素...

Angular：如何根据条件阻止 RouteReuseStrategy？

我试图根据某些条件阻止 RouteReuseStrategy，但这没有发生。我有一个名为 comp-a 的路线名称，它以两种不同的方式调用。 1 次来自后退按钮和

Spring Boot 与 Angular 集成

有没有办法让我的后端 Spring Boot 项目与 Angular 前端一起运行，而无需启动单独的 Angular 服务器？我可以将整个应用程序仅部署在后端服务器上吗？

如何在 Angular 中解析 JSON 对象

我正在尝试从 Angular 应用程序调用“https://restcountries.com/v3.1/all”，并且在 HTML 页面中显示结果时，我能够解析 Name、flag 、 Capital 但当 tr ...

在 mat-paginator 中 pageSizeOptions 不起作用

我正在使用 Angular Material 开发 Angular 项目。 我正在尝试在表视图中显示数据，使用分页，因为 很多数据。 问题是分页的 pageSizeOptions 选项不可用...

如何使用动态url（slugs）和ng-include在Angular JS中正确返回404？

我目前正在使用 UI-router 使用 AngularJS 为我们公司构建一个投资组合网站。我们正在使用 HTML5 url 方案，并且我已经使用标准 .htaccess 来重写对 index.html 的请求（

如何模拟 AngularJS 模块配置提供程序

在我们的模块中，我们定义了一个自定义方法，它本质上为 $stateProvider 添加了更多功能...... （功能 （） { '使用严格'； 有角的 .module('someModule'...

NG8001：“路由器插座”不是已知元素：

我一开始遇到了问题，我在登录时尝试登录以与main连接，但是当我移动时，我向pro gpt寻求帮助，现在出现了一个错误，我无法以任何方式解决，

使用 angularjs 中的 $rootScope 将值从一个不同的应用程序模块控制器传递到另一个应用程序模块服务

我正在 angularjs 中做项目，我的要求是需要使用 $rootScope 将值从一个不同的应用程序模块控制器传递到另一个应用程序模块服务 这是我的代码部分 登录模块和

错误：NG8001：“路由器出口”不是已知元素：在 Angular 中

我收到以下错误： NG8001：路由器出口不是已知元素： 如果 router-outlet 是 Angular 组件，则验证它是否是该模块的一部分。 如果 router-outlet 是一个 Web 组件...

使用 Angular 和 Node Routing 加载没有 css 和 js 的视图

我正在构建一个使用 Node 和 Angular 路由的应用程序。我想处理 Angular 中的所有路线。 文件夹结构： 民众 图片 CSS js 部分 _search.html 首页.html 索引.html 萨斯 全部

角度路由器中的模块构建失败

嗨，我正在尝试创建一个角度项目，在创建项目后，当我给出 ng 时，它抛出以下错误。我已经删除了节点模块并重新安装，创建了一个新的...

AngularJS：位置更改后刷新视图

我有一个有 2 个视图的应用程序

使用 routerLink 并（单击）同一按钮

这是询问最佳实践。在同一个按钮中使用 routerLink 和（单击）是一个好习惯吗？ 因为我们可以把路由器导航... 这是询问最佳实践。在同一个按钮中使用 routerLink 和（单击）是一个好习惯吗？ <button routerLink="/link" (click)="back()"> 因为我们可以将路由器导航逻辑放在 back() 方法中，如下所示， this.router.navigate(['/link']); 我发现的关于此的所有内容是这篇文章，它没有讨论要遵循的最佳实践。如果其中一个比另一个更好，你能解释一下原因吗？ 以下是一些如何使用 routerLink 和 click , 的示例 希望这会有所帮助： -> 如果您想重定向到某些页面，您可以随时使用此: <a [routerLink]="['/my-book-listing']"> My Books</a> -> 如果您想重定向到页面但想发送一些参数（例如 ID），请使用： <a [routerLink]="['/my-book-details','3']">Book number 3</a> -> 如果您需要向路由发送查询参数，那么您可以使用 <a [routerLink]="['/search-this']" [queryParams]="{text:'sam',category:'social'}">Go Search</a> -> 如果在导航到页面之前需要代码逻辑，那么您需要使用 <button (click)="createBook()">Create Book</button> createBook(bookData){ // Create Book logic this.router.navigate(['/my-book-listing']); } -> 您也可以按如下方式使用，但这不是一个好习惯，除非您调用函数来销毁变量或保存页面留下的数据 <button (click)="showLoader()" [routerLink]="['/my-book-listing']">Create Book</button> showLoader(){ // showLoader logic } 如果您需要在前往路线之前发生逻辑，您可以导入路由器模块并按原样使用它。 import { Component, OnInit } from '@angular/core' import { Router } from '@angular/router'; @Component({ selector: 'app-foo', templateUrl: './foo.component.html', styleUrls: ['./foo.component.sass'] }) export class FooComponent implements OnInit{ constructor( private router: Router ) { } ngOnInit() {} action(){ // ...Your Logic... this.router.navigate([ '/bar' ]) } } <div> <button (click)='action()' >Go To Bar</button> </div> 我不确定最佳实践，但我想说，只要不干扰导航，在同一个按钮中使用 routerLink 和（单击）就可以了。 通过 this.router.navigate(['/link']); 手动导航不是最佳选择，因为 routerLink 处理诸如“在新选项卡中打开”之类的事情，而使用（单击）处理程序实现您自己的操作是不可取的。 当我只需导航到 routerLink 时，我会选择 /link 但是，如果在导航之前需要执行一些逻辑，那么我会选择click() 还有一些情况，你必须通过路由导航传入查询参数，那么我也更愿意使用click()