Question

我有一个使用html属性的组件。我对其进行了设计，以便用户可以在其他组件中使用该组件时设置路由。但是，每当尝试设置路由值时，我都会遇到“路由器无提供者”的问题。

这是我在浏览器上得到的输出：

错误错误：StaticInjectorError（AppModule）[RouterLinkActive->路由器]： StaticInjectorError（平台：核心）[RouterLinkActive->路由器]： NullInjectorError：没有路由器的提供程序！

以下是组件：

@Component({
  selector: 'li[o-nav-link]',
  template: `
    <a #link [routerLink]="route" class="nav-link" routerLinkActive="active"
     [attr.title]="title === 'undefined' ? null : title"
     [attr.aria-current]="isActive"><ng-content></ng-content></a>
  `
})

    export class ONavLink implements DoCheck {
      @HostBinding('class.nav-item')

      @Input()
      public route: string;

      @Input()
      public title: string;

      @ViewChild('link')
      public link: ElementRef;

      public isActive = false;

      public ngDoCheck() {
        this.isActive = this.link.nativeElement.classList.contains('active');
      }
    }

我正在这样使用它：

<li o-nav-link route="test">Getting tested</li>

如果您知道这里到底发生了什么，那可能会有所帮助。我像疯了似的四处乱逛！

这是我的模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { NgBoostedModule } from 'ng-boosted';

const approutes: Routes = [
  { path: 'test', component: AppComponent},
  { path: 'start', component: AppComponent}
  ];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    NgBoostedModule,
    FormsModule,
    RouterModule.forRoot(approutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

PS：'test'是在路由数组中定义的：）

Answer 1

在您的RouterMoudle和AppModule中导入[routerLink]是一个字符串数组，而不仅仅是一个字符串值

尝试将route属性绑定为字符串数组

<li o-nav-link [route]="['test']">Getting tested</li>

我认为上面的代码可以工作-请检查-编码愉快！！

更新：

经过一些研究，我更改了ONavLink组件中的选择器，这是问题的主要原因-在您的问题中，您绑定的是[route]，这不是{{1}的已知属性}，这就是问题的胜利点

所以最后是更新-

ONavLink.compoent.ts

<li>

我将选择器更改为@Component({ selector: 'li-link', template: ` <a #link [routerLink]="route" class="nav-link" routerLinkActive='active' [attr.title]="title === 'undefined' ? null : title" [attr.aria-current]="isActive"><ng-content></ng-content></a> ` }) export class ONavLink implements DoCheck { @HostBinding('class.nav-item') @Input() public route: string[]; @Input() public title: string; @ViewChild('link') public link: ElementRef; public isActive = false; public ngDoCheck() { this.isActive = this.link.nativeElement.classList.contains('active'); } }，将li-link属性更改为route，您可以像这样访问组件

string[]

确保您的路线中有路线<li-link [route]="['test']">Getting Tested</li-link>，并确保要导入模块

希望这会起作用

如何使用@input设置路线

1 个答案: