如何使用@input设置路线

Question

我有一个使用html属性的组件。我设计它是为了让用户在另一个组件中使用该组件时可以设置路线。但每当我试图设置路由值时，我都会遇到"没有路由器的提供商"。

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

错误错误：StaticInjectorError(AppModule([RouterLinkActive->Router]：StaticInjectorError(平台：核心([RouterLinkActive->Router]：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:"测试"在路由数组中定义：(

Answer 1

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

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

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

我认为上面的代码会起作用-请检查-快乐编码！！

更新：

经过一些研究，我更改了ONavLink组件中的选择器，这是问题的主要原因-在您的问题中，您正在绑定[route]，这不是<li>的已知属性，这是该问题的胜利牌

最后是更新-

ONavLink.component.ts

@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>

确保您的路线中有路线test，并确保您正在导入模块

希望这将工作