angular-new-router 相关问题


Angular 项目不适用于@babylonjs/viewer

我在全球安装了@Angular/[email protected]。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个 Angular 项目。 CD 到文件夹“Babyl...


如何让新的 Angular 17 项目运行?

全新安装 Nodejs (20.10.0) 和 Angular (17.0.8)。新项目(“ng new Default”),没有文件更改。 “ngserve”没有错误,但浏览器控制台显示: main.ts:5 错误


在 Angular 中更新信号的嵌套属性时如何中断对象引用?

我有一个 Customer 对象,包装在 Angular 的信号中,如下所示: mCustomer: Signal = signal(new Customer(id: 1, ...)); 该信号是通过使用 ngRx Sig 的服务提供的...


选中/取消选中 mat-checkbox 未正确返回 true 或 false

我正在使用 Angular 15 和 Angular Material 14,下面是我用来显示复选框列表的 HTML 代码 我正在 Angular 15 和 Angular Material 14 工作,下面是我用来显示复选框列表的 HTML 代码 <div *ngFor="let control of checkboxArray.controls;let i = index" > <mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> 下面是Angular中onCheckedChange函数的代码 onCheckedChange(index: number) { this.sortCheckboxArray(); const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value) { this.lists.push(checkboxItem.id.toString()); } else { this.lists.pop(checkboxItem.id.toString()); } } this.updateSubscriberGroupsCount(); this.cdr.detectChanges(); } 当我选中复选框时,在这个 onCheckedChange 函数中,control.value 始终返回 false。哪里出了问题?无法理解.. 这是一个工作版本,复选框逻辑工作正常,希望有帮助! 我们需要使用control.value获取表单组,但我们还需要访问内部表单控件,然后获取复选框值! import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatCheckboxModule } from '@angular/material/checkbox'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule], template: ` <form [formGroup]="form"> <div formArrayName="array"> <div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i"> <mat-checkbox formControlName="test" style="margin-bottom: 15px;" (change)="onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> </div> </form> `, }) export class App { name = 'Angular'; form = new FormGroup({ array: new FormArray([]), }); lists = []; checkboxItems: any = []; ngOnInit() { this.add(); this.add(); this.add(); } add() { this.checkboxArray.push( new FormGroup({ test: new FormControl(false), }) ); this.checkboxItems.push({ name: 'test' }); } get checkboxArray() { return this.form.get('array') as FormArray; } onCheckedChange(index: number) { // this.sortCheckboxArray(); // const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value.test) { console.log('checked'); // this.lists.push(checkboxItem.id.toString()); } else { console.log('not checked'); // this.lists.pop(checkboxItem.id.toString()); } } // this.updateSubscriberGroupsCount(); // this.cdr.detectChanges(); } } bootstrapApplication(App); 堆栈闪电战


NG8001:“app-welcome”不是已知元素:

我的 Angular 应用程序遇到问题,收到错误 8001。我不知道如何处理它。谁能帮我这个?谢谢你! 应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题,收到错误 8001。我不知道如何处理它。谁能帮我这个?谢谢! app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置,但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗? app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。


Angular tabView primeNG 路由

我正在尝试将路由添加到我的 tabView 但它不起作用,请问有什么建议吗?我尝试添加 routerLink="组件路径" 但没有运气 这是 HTML 我正在尝试将路由添加到我的 tabView 但它不起作用,请问有什么建议吗?我尝试添加 routerLink="组件路径" 但没有运气 这是html <p-tabView> <p-tabPanel header="Weather Data" routerLink="/weather-data"> <app-weather-data></app-weather-data> </p-tabPanel> <p-tabPanel header="Chart"> <app-chart></app-chart> </p-tabPanel> <p-tabPanel header="Heat index calculator" closable="true"> <app-heat-index></app-heat-index> </p-tabPanel> </p-tabView> 这是 module.ts import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'weather-data', component: WeatherDataComponent }, { path: 'chart', component: ChartComponent }, { path: 'heat-index', component: HeatIndexComponent }, ]; @NgModule({ declarations: [ AppComponent, WeatherDataComponent, ChartComponent, HeatIndexComponent, ], imports: [ BrowserModule, TabViewModule, ButtonModule, ChartModule, TableModule, HttpClientModule, InputNumberModule, FormsModule, SelectButtonModule, DropdownModule, BrowserAnimationsModule, FontAwesomeModule, InputSwitchModule, PaginatorModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), ], providers: [DatePipe], bootstrap: [AppComponent], }) export class AppModule {} 我找不到有关 tabView 组件的任何有关如何实现路由的文档,感谢任何帮助 我按以下方式使用了 TabMenu 组件。 <p-tabMenu [model]="items"> </p-tabMenu> <router-outlet></router-outlet> MenuItem 类型有一个命令属性,在命令上您可以实现自定义操作,在您的情况下可以是路由。 this.items = [ { label: "Map", icon: "pi pi-fw pi-map", command: () => { this.router.navigate(["./map"]) }, }, ];


React Router v6 使用参数导航

目前,我在实现React Router v6(使用6.3.0)时遇到问题 假设我有如下所示的路由 const ParticipantRoutes = () => ( 目前,我在实现React Router v6(使用6.3.0)时遇到问题 假设我有如下所示的路由 const ParticipantRoutes = () => ( <ErrorBoundaryRoutes> <Route index element={<Participant />} /> <Route path="new" element={<ParticipantUpdate />} /> <Route path=":id"> <Route index element={<ParticipantDetail />} /> <Route path=":id"> <Route path="edit-invoice" element={<InvoiceUpdate />}/> </Route> <Route path="invoice" element={<ParticipantInvoiceUpdate />} /> <Route path="edit" element={<ParticipantUpdate />} /> <Route path="delete" element={<ParticipantDeleteDialog />} /> </Route> </ErrorBoundaryRoutes> ); 还有另一条路线,比如 const InvoiceRoutes = () => ( <ErrorBoundaryRoutes> <Route index element={<Invoice />} /> <Route path=":id"> <Route index element={<InvoiceDetail />} /> <Route path="delete" element={<InvoiceDeleteDialog />} /> <Route path="payment" element={<InvoicePaidDialog />} /> </Route> </ErrorBoundaryRoutes> ); 当我访问 URL 上定义的 ParticipantInvoiceUpdate 时,问题就出现了,比如 .../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice 此页面具有向某些服务提交一些数据的行为,当接受服务器的响应时,我使用导航功能导航回 ParticipantDetail 元素。 navigate('/participant/${*some-guid-participant*}'); 但它不起作用,我尝试了一些东西,但似乎它只能导航到没有给出任何参数的元素。类似的东西 navigate('/participant'); 或 navigate('/invoice); 我也尝试过使用 generatePath 功能并将其与导航结合起来,但仍然没有成功 navigate(generatePath('/participant/:id',{id: participantId}), {replace:true}); 请帮助了解我是否遗漏了什么或误解了这个概念。 根据您的代码,路线:.../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice 指组件 InvoiceUpdate 而不是 ParticipantInvoiceUpdate 此外,使用字符串格式时不要忘记将 ' 更改为 ` : navigate(`/participant/${some-guid-participant}`);


Quasar Vue Router 解析名为route的href

我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路: ”/”, 组件:() => import("layouts/MainLayout.vue")...


React Router v6.4+ 数据 API:重试加载程序而不显示错误

使用react-router 6.21.1和新的数据api,我的路由设置如下: 常量路由 = [ { 元素: , 错误元素:, 孩子们...


使用react-router-v6和zustand进行身份验证

应用程序路线: 函数 AppRoutes(): JSX.Element { 返回 ( } /> }> ...


React Router 为动态路由渲染错误组件的问题

我遇到了 React Router 的问题,使用动态参数导航到特定 URL 会渲染错误的组件。具体来说,当导航到 http://localhost:3001/Create/4 时,...


从 Angular 16 转换为 Angular 17 后缺少 SSR 支持

我已将我的项目从 Angular 16 升级到 Angular 17。但是,我目前没有收到服务器端渲染 (SSR) 的支持。从 Angular 16 迁移后,Angular 是否提供 SSR 支持...


有没有一种方法可以在React中单击时嵌入链接来重定向组件?

我有一个导航栏,其路线设置如下: 导入'../styles/Nav.css' 从 'react-router-dom' 导入 { BrowserRouter as Router, Routes, Route, Link} 从 '../components/Home' 导入 { Home }


如何使用Vue Router的相对重定向(不起作用)?

我正在从 Vue router Doc 学习相对重定向。 我正在尝试实现代码的文档示例。 常量路由 = [ { // 始终将 /users/123/posts 重定向到 /users/123/prof...


反应问题,当我将标头组件添加到我的主页组件时,没有任何内容加载

从“react”导入React; 从 '@chakra-ui/react' 导入 { ChakraProvider, CSSReset }; 从 'react-router-dom' 导入 { BrowserRouter as Router, Route, Routes }; 从 './nav' 导入导航; 导入首页


React Router:第一次访问 ParentNotificationsPage 组件时不显示数据,仅在返回后才显示

我在 React 应用程序中遇到了 React Router 的问题,其中 ParentNotificationsPage 组件在第一次访问时不显示数据。仅当我导航回


vue-router useRouter 在构建库组件时不起作用

我正在构建一个 Vue3 npm 组件库,希望我可以使用 vue-router 的 useRouter 访问当前路由器,并且它将由导入我的任何 vue 应用程序自动提供


Expo 路由器 - 如何定义与 index.tsx 不同的默认堆栈

使用React Native Expo Router,我想定义一个与index.tsx不同的默认堆栈。目前,当我使用一个名为 page1.tsx 的简单堆栈启动应用程序时,expo router 找不到我...


运行单元测试时无法检测到已安装的react-router-dom包

我想用react-router-dom学习react测试库。我使用 npx create-react-app 命令创建了该应用程序。生成的代码在父文件夹中已经有一个 App.test.js: 导入{渲染,


如何在SikuliX(Java)中单击当前鼠标位置?

这是我尝试过的: 屏幕 screenWithCalendarField = new Screen(); 比赛日历 = new Match(); 尝试{ 日历 = screenWithCalendarField.find(new File("D:\Sikuli\CalendarField.png").


Angular CLI 版本与 Angular Core 版本之间的兼容性?

有什么方法可以知道要安装哪个与我的 Angular Core 版本兼容的 Angular CLI 版本?他们完全独立吗? 使用 Core v5.2.8 开发现有的 Angular 应用程序...


React Router 与 React 16.6 Suspense “提供给 `Route` 的 `object` 类型的道具 `component` 无效,预期为 `function`。”

我正在使用最新版本(16.6)的React和react-router(4.3.1),并尝试使用React.Suspense进行代码分割。 虽然我的路由工作正常并且代码确实分成了几个bun...


this.props.history.push() 似乎不再在 React Router v4 中工作,有什么替代方案吗?

我是 React 新手,我看到的大多数有关使用 React Router 进行重定向的教程似乎都在使用上述代码片段。我想要实现的是将用户重定向到主页...


当React Router中的路由命中时,如何有条件地渲染两个组件或更改两个出口?

我有一个 React 应用程序,我在其中使用 React Router。在我的布局组件中,我有这样的结构: 从“反应”导入反应; 从 './components/Header/Header' 导入标头; 导入 Foo...


安装 Angular CLI 时出现 Npm Angular 警告

当我尝试通过以下方式安装 CLI 时收到 npm 警告: npm install -g @angular/cli: C:\Users\myuser>npm install -g @angular/[email protected] npm 警告已弃用 [email protected]:此模块...


Angular 17 中的 NG 块 UI

我尝试在 Angular 17 中使用 NG Block UI 并收到此错误 ng block ui error in Angular 17 知道这个模块在 Angular 17 中如何工作吗? 提前致谢 我使用 npm i ng-


React store.getState 不是一个函数

这是我的代码: 商店.js 从 'redux' 导入 {createStore, applyMiddleware, compose}; 从“不可变”导入{fromJS}; 从“react-router-redux”导入{routerMiddleware}; 导入createSagaMidd...


是否使用 useState 来反应原生动画 => new Animated.Value() ?

在react-native中使用Animated.Value()的最佳方法是什么? 是否使用 useState() ? const [fadeAnim] = useState(new Animated.Value(0)) 或者 const fadeAnim = new Animated.Value(0) React-nati...


Angular Material v17:缺少“MatFormFieldAppearance”中的“遗产”

在 Angular Material v14 中,MatFormFieldAppearance 提供了传统、标准、填充和轮廓值。 类型 MatFormFieldAppearance = '旧版' | '标准' | '填充' | '大纲'; 然而,在 Angular


Angular“ng 生成组件”复制组件

由于某种原因,自从从 Angular 13 升级到 Angular 15 后,当我输入: ng g c 某些组件 Angular 复制组件,创建重复文件。这种情况 100% 都会发生。第二次...


如何在闰年中向日期时间添加一年

我想从给定日期获取下一年月份的最后一天 这是我的做法: $copy = new \DateTime(); $lastDay = new \DateTime($copy->add((new \DateInterval('P1Y')))->format...


如何使用 Angular 服务创建 nx 库

我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此,我通常创建这样的 Angular 服务: 导入 { 管理组件 }


Angular16 中的 Router parseUrl() 与 navigate()

我正在使用 authGuard 进行身份验证。我想知道这两个之间的区别 // 重定向到登录页面 return router.navigate(['/login']); return router.parseUrl('/login'); 在...


Typescript、React、强类型 useHistory

我将 useHistory (react-router-dom) 变量作为参数发送到employee.service,其中我使用带有状态和路径名的“history.push”方法。不幸的是我不能...


angular-2-dropdown-multiselect - 自定义宽度 100%

我正在实现这个 angular-2-dropdown-multiselect 组件: https://www.npmjs.com/package/angular-2-dropdown-multiselect 该组件工作正常,但我需要将其设置为适合续...


Angular-NG8001 未知元素错误。怎么解决?

我的 Angular 项目有问题。我有一个项目结构:应用程序结构。在我的 app.module.ts 中,代码如下: 从'@angular/core'导入{NgModule}; 从'@


java - 从语义上比较不同类型的数字

假设我有三个数字: 可比较 n1 = new Integer(432); 可比较 n2 = new Long(40); 可比较 n3 = new Double(500.12); 我想通过 Comparable 接口来比较这些数字。


使用模块联盟进行 Angular 升级 - “集合没有原理图。”

我正在将一组 Angular 应用程序从 v12 升级到 v16,它们使用模块联合和 Angular Architects 的模块联合插件。 成功升级每个应用程序的 Angular 版本后...


Node Sass 版本 9.0.0 与 ^4.0.0 不兼容

我的应用程序中没有安装node-sass或sass包。但我一直收到这个错误 ./src/scss/styles.scss 中的错误(./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plu...


放大init UnauthorizedException

我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时


XHR 请求出现 500 内部服务器错误

这是我的代码: var fd = new FormData(document.querySelector('#form-step1')); var xhr = new XMLHttpRequest(); xhr.open('POST', '/Handlers/newAccount_handler.php', true); xhr.send(fd); // 这个我...


如何处理默认路径

我在我的网站上使用 React Router,遇到了以下问题。我的主要应用程序组件定义如下: 导入'./App.css' 从 './Navbar' 导入 { Navbar } 进口 { 出口 } f...


onMounted 当没有要关联的活动组件实例时调用

Symfony/VueJS 组件 // 导入 从“../hooks/getUser”导入 getUser; 从 'vue-router' 导入 { useRoute } // 增值服务 常量路由 = useRoute() 常量 { 用户 } = getUser(1) const 路线我...


JUnit 使用 BigDecimal 断言

我想在 2 两位小数之间使用断言,我使用这个: BigDecimal bd1 = new BigDecimal (1000); BigDecimal bd2 = new BigDecimal (1000); org.junit.Assert.assertSame (bd1,bd2); 但是 JUnit 日志...


Nuxt 3 项目无法找到 PWA 图标

开发工具错误 我目前正在尝试在我的 nuxt 3 项目中实现 PWA 功能,但我不断遇到这个问题:[Vue Router warn]: No match found for location with path "/icon_512x512...


React-router:更改 URL 并清除历史记录

我有以下场景: 用户打开激活链接;用户完成激活过程后,系统会将其移动到另一个页面。 我不想保留激活状态...


链接点击时的反应模式调用

使用react-modal,我需要通过锚标记或react-router-dom链接单击超链接时显示模式。 示例:单击注册超链接,注册表模式应打开。


登录后,使用 angular-oauth2-oidc 时,hasValidAccessToken 始终为 true

我已经使用 Angular 12.2 实现了 angular-oauth-oidc (版本 12.1.0)。我使用 Keycloak 作为 SSO 登录没有问题,但我在库中遇到了奇怪的行为。 每次,之后...


我正在使用从文件读取数据的数组创建一个选择

运行 getGrades() 方法时,它不断返回 B+。我不知道出了什么问题,我需要帮助。我将分享代码 尝试 { 扫描仪输入 = new Scanner(new FileInputStream(new File(&q...


addPointerPressed 和 addActionListener 有什么区别?

我有以下示例代码: hi = new Form("点击测试应用程序", BoxLayout.y()); Label l = new Label("按程序点击"); hi.add(l); b1 = 新按钮(“单击


© www.soinside.com 2019 - 2024. All rights reserved.