app.menu.component.ts代码如下
import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { SystemService } from '../services/system.service';
import { LayoutService } from './service/app.layout.service';
@Component({
selector: 'app-menu',
templateUrl: './app.menu.component.html'
})
export class AppMenuComponent implements OnInit {
model: any[] = [];
constructor(public layoutService: LayoutService,
private systemService: SystemService,
private toastr: ToastrService
) { }
ngOnInit() {
this.model = [
{
label: 'Menu',
items: [
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['home'] },
{ label: 'Swarm', icon: 'pi pi-fw pi-share-alt', routerLink: ['swarm'] },
{ label: 'Network', icon: 'pi pi-fw pi-wifi', routerLink: ['network'] },
{ label: 'Settings', icon: 'pi pi-fw pi-cog', routerLink: ['settings'] },
{ label: 'Logs', icon: 'pi pi-fw pi-list', routerLink: ['logs'] },
]
}
];
}
public restart() {
this.systemService.restart().subscribe(res => {
});
this.toastr.success('Success!', 'Bitaxe restarted');
}
}
app.module.ts代码如下
import 'chartjs-adapter-moment';
import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EditComponent } from './components/edit/edit.component';
import { NetworkEditComponent } from './components/network-edit/network.edit.component';
import { HomeComponent } from './components/home/home.component';
import { LoadingComponent } from './components/loading/loading.component';
import { LogsComponent } from './components/logs/logs.component';
import { NetworkComponent } from './components/network/network.component';
import { SettingsComponent } from './components/settings/settings.component';
import { SwarmComponent } from './components/swarm/swarm.component';
import { ThemeConfigComponent } from './components/settings/theme-config.component';
import { AppLayoutModule } from './layout/app.layout.module';
import { ANSIPipe } from './pipes/ansi.pipe';
import { DateAgoPipe } from './pipes/date-ago.pipe';
import { HashSuffixPipe } from './pipes/hash-suffix.pipe';
import { PrimeNGModule } from './prime-ng.module';
import { MessageModule } from 'primeng/message';
import { TooltipModule } from 'primeng/tooltip';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core'; //
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; //
import { HttpClient } from '@angular/common/http'; //
import { LanguageSwitcherComponent } from './components/language-switcher/language-switcher.component'; //
import { APP_INITIALIZER } from '@angular/core';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
export function appInitializerFactory(translate: TranslateService) {
return () => {
const savedLang = localStorage.getItem('userLanguage');
if (savedLang) {
return translate.use(savedLang).toPromise();
}
return Promise.resolve();
};
}
const components = [
AppComponent,
EditComponent,
NetworkEditComponent,
HomeComponent,
LoadingComponent,
NetworkComponent,
SettingsComponent,
LogsComponent
];
@NgModule({
declarations: [
...components,
ANSIPipe,
DateAgoPipe,
SwarmComponent,
SettingsComponent,
HashSuffixPipe,
ThemeConfigComponent,
LanguageSwitcherComponent //
],
exports: [
// 如果其他模块需要使用该组件
LanguageSwitcherComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ReactiveFormsModule,
FormsModule,
ToastrModule.forRoot({
positionClass: 'toast-bottom-right',
}),
BrowserAnimationsModule,
CommonModule,
PrimeNGModule,
AppLayoutModule,
MessageModule,
TooltipModule,
TranslateModule.forRoot({
defaultLanguage: 'en',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}) //
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{
provide: APP_INITIALIZER,
useFactory: appInitializerFactory,
deps: [TranslateService],
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
在app.menu.component.html中使用{{ item.label | translate }}报错No pipe found with name 'translate'.ngtsc(-998004)
app.menu.component.ts(6, 44): Error occurs in the template of component AppMenuComponent.怎么解决
博客给出了Angular动画模块的npm安装命令，即npm install @angular/animations --save，这有助于开发者在项目中引入Angular动画功能。
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
