asp.net Angular 6误差“零进样器误差：没有路由器的提供程序！”

c2e8gylq 于 2023-02-10 发布在 .NET

关注(0)|答案(8)|浏览(167)

我目前正在做一个项目，我需要用户填写一个角形表单，然后将其发送到我的后端来处理数据。后端在ASP.NET中，我已经有了一个HTML格式的功能表单：

<body>
<h2 style="text-align:center">Push notification test</h2>
<form style="align-content:center" action="SendPushNotification" method="post">
    <div>
        <fieldset>
            <legend> Informations </legend>
            <label> Notification name : </label>
            <input name="notificationName" id="notificationName" type="text" value="Bonjour" />
        </fieldset>
        <br />
        <fieldset>
            <label> Server Key : </label>
            <input name="serverKey" id="serverKey" type="text" value="AAAAuTv1XVQ:APA91bHsgOmK-quki_rRehRhON9c_y9INocubgru6_jPePiE_Zt5iVXfJ-XD43RubfIY5WEoIpFEyziByfeNRsoIlpeNi693bGZYfjjb7ULDx23sRzHQcYLCgl7y3vn-K9X8hrmQhw1oY6lSTml2aqzoi8GGBIeZYA" />
        </fieldset>
        <br />
        <fieldset>
            <label> To mobile user : </label>
            <select name="selectMobile" id="selectMobile" style="width:400px" name="mobileUser">
                <option>Select Mobile User</option>
            </select>
        </fieldset>
        <br />
        <fieldset>
            <label> To topic : </label>
            <input name="topicName" id="topicName" type="text" value="news" />
        </fieldset>
        <br />
        <fieldset>
            <label> Message : </label>
            <textarea name="notificationMessage" id="notificationMessage" cols="40" rows="5">Comment tu vas toi ?</textarea>
        </fieldset>
        <br />
        <input type="submit" value="Send Notification" />
    </div>
</form>

- HTML呈现**

因此，我尝试在Angular 6中对此结果执行相同的操作，但当我想将路由"SendNotification"分配给我的"Submit"按钮时，我得到以下错误：

- Angular 渲染+误差**

- 通知-表单.组件. html**

<button [routerLink]="['SendNotification']" type="submit" class="btn btn-success" [disabled]="!notificationForm.form.valid">Submit</button>

当我添加[routerLink]或添加私有构造函数时，错误就会发生：

constructor(private router: Router) {}

到我的notification-form.component.ts。我已经尝试了几种解决方案，如添加HttpClientModule到我的app.module.ts，但没有任何工作。
我做错什么了吗？
提前感谢您抽出宝贵时间!
更新：

- 应用程序模块. ts**

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { NotificationFormComponent } from './notification-form/notification-form.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    RouterModule
  ],  
  declarations: [
    AppComponent,
    NotificationFormComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

asp.net

来源：https://stackoverflow.com/questions/51419602/angular-6-error-nullinjectorerror-no-provider-for-router

8条答案

按热度按时间

5jvtdoz21#

首次将RouteModule导入app.module.ts

import { RouterModule, Routes } from '@angular/router';

并使用它如下：（您只导入RouterModule，但还需要添加forRoot([])。）

imports: [
    RouterModule.forRoot([])
    // other imports here
  ]

如果你有任何路径，请按如下方式使用它们。

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

在主组件（app.component.html）中添加<router-outlet></router-outlet>
希望这对你有帮助!

赞(0）回复(0）举报 2023-02-10

wlp8pajw2#

如果您正在使用

- 一月一日**

尝试将其替换为

- 一米一米一**

赞(0）回复(0）举报 2023-02-10

ig9co6j13#

对于那些还在纠结于Angular编译器的神秘/无用的错误消息的人，请确保您在某处有这样的消息：

RouterModule.forRoot([])

我只使用了RouterModule.forChild([])，在其中一个模块中添加了forRoot（）修复了这个错误。

赞(0）回复(0）举报 2023-02-10

uqdfh47h4#

如果有人正在使用npm链接，则执行以下操作：
在.angular-cli.json中添加/替换：

"defaults": {
    "styleExt": "css",
    "component": {},
    "build": {
        "preserveSymlinks": true
    }
}

赞(0）回复(0）举报 2023-02-10

6ojccjat5#

就我而言，我只写了：

<base href="/">

在index.html文件的head标记中。

...
<head>
  ...
  <title>Name of page</title>
  <base href="/">
</head>
...

赞(0）回复(0）举报 2023-02-10

ua4mk5z46#

请检查此链接https://angular.io/api/router/RouterStateSnapshot

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

@Component({
  templateUrl:'template.html'
})
export class MyComponent {
  constructor(router: Router) {
   const state: RouterState = router.routerState;
   const snapshot: RouterStateSnapshot = state.snapshot;
   console.log(state);
   console.log(snapshot);
   //...
 }
}

赞(0）回复(0）举报 2023-02-10

1tuwyuhd7#

添加，因为这是Google搜索NullInjectorError: No provider for Router!时的首选答案
如果您在单元测试中遇到这种情况，并且没有测试Router本身，请尝试导入RouterTestingModule
import { RouterTestingModule } from '@angular/router/testing';

赞(0）回复(0）举报 2023-02-10

xcitsw888#

您需要添加一个<router-outlet></router-outlet>
标签<router-outlet></router-outlet>是您的应用将呈现不同路线的位置。例如，在app.component.html中，您可以具有：

<header>
    <bt-toolbar></bt-toolbar>
</header>

<main>
    <router-outlet></router-outlet>
</main>

有了这个模板，我有一个顶部的酒吧总是可见的，下面是不同路线的内容。
将以下内容添加到您的app.module.ts的imports数组中：

RouterModule.forRoot([
      { path: 'SendNotification', component: YourComponent }

赞(0）回复(0）举报 2023-02-10

我来回答

asp.net Angular 6误差“零进样器误差：没有路由器的提供程序！”

8条答案

相关问题

热门标签

最新问答