标签: angular5

我有一个 Angular 4 应用程序，我正在将其升级到 Angular 5。

我收到以下错误。

src/app/application/services/generated/variables.ts(1,10) 中的错误：错误 TS2305：模块 '"..../node_modules/@angular/core/core"' 没有导出成员 'OpaqueToken'。

代码片段是：

import { OpaqueToken } from '@angular/core';

export const BASE_PATH = new OpaqueToken('basePath');
export const COLLECTION_FORMATS = {
    'csv': ',',
    'tsv': '   ',
    'ssv': ' ',
    'pipes': '|'
}

此代码由swagger editor生成。

我有一个在组件之间传递数据的服务，当它被调用时它可以工作，但是当我重新加载时，服务数据被重置。贮存 ？我很好奇的一件事是，我可以使用 rxjs 来实现这一点，但我不确定这会有什么帮助吗？我害怕使用 localstorage，因为数据将主要是对象或数组，而不是用户 ID 或会话 ID。对此的任何输入都会真的很有帮助。我制作了一个示例来帮助我。你可以在下面找到

https://stackblitz.com/edit/component-data-sharing-service

要允许访问管理路由，我必须检查两件事：

1. 如果用户通过身份验证
2. 如果此用户是管理员。我从 firebase 数据库获取管理员状态。

管理卫士

import {ActivatedRouteSnapshot, CanActivate, Router, 
RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {AngularFireAuth} from 'angularfire2/auth';
import {Injectable} from '@angular/core';
import {DbActionsService} from '../services/db-actions.service';
import {AuthService} from '../services/auth.service';
import 'rxjs/add/operator/map';

@Injectable()
export class AdminGuard implements CanActivate {

  constructor(private afAuth: AngularFireAuth, private router: Router, private dbAction: DbActionsService, private authService : AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    if (this.afAuth.auth.currentUser) {
      return this.dbAction.getUserProfileData(this.afAuth.auth.currentUser.email).map((user) => {
        if (user[0].admin) {
          return true;
        } else {
          this.router.navigate(['/']); …

我有一个组件（它是一个 MatDialog 组件），它的功能之一就是通过简单地调用“this.dialogRef.close(true);”来保存一些日期并在最后（对话框）关闭自己。到现在为止还挺好。问题在于单元测试。当我尝试测试此函数时，Karma 会抛出错误“TypeError: this.dialogRef.close is not a function”。我想它不能识别在对话框中调用的函数 close，因为我一定忘记以某种方式在我的 spec.ts 文件中启动这个 dialogRef，但我不知道如何继续，考虑到事实并非如此网上有很多关于在 spec.ts 中配置 Material 2 组件的资料。我的问题是：如何让这个测试通过单元测试识别这个 dialogRef.close() 函数。

下面的一些示例代码：timeRangeDialogComponent.ts

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

export class TimeRangeDialogComponent implements OnInit, OnDestroy {

 constructor(public dialogRef: MatDialogRef<TimeRangeDialogComponent>,
           @Inject(MAT_DIALOG_DATA) public data: any) {
 }

 saveCustomTimeRange(): void {
   this.dialogRef.close(true);
 }
}

TimeRangeDialogComponent.spec.ts

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ TimeRangeDialogComponent ],
    imports: [ FormsModule, MaterialModule, MatDatepickerModule ],
    providers: [
      { provide: MatDialogRef, useValue: {} },
      { provide: MAT_DIALOG_DATA, useValue: [] } ] …

我需要在 ngx-admin nebular 和 angular 5 中的路由选项卡集组件中添加一个参数，如下所示：

tabs: any[] = [
    {
      title: 'My tab 1',
      route: '/pages/projects/edit/tab1/:id',
    }...
]

有没有办法做到这一点？

提前致谢

我需要帮助。我是一个完整的初学者，我在任何地方都找不到解决方案，很抱歉，如果已经有人问过了，但是无论我尝试什么，我都无法在一页上显示背景图像。

我想做的事？

在主页上显示背景图像。

笔记：

• 我默认没有资产文件夹。
• 在本地主机上尝试：4200
• 在浏览器中转到 Localhost:4200/assets/images/bg.jpg 显示图片。
• 如果我在 url() 中放置在线托管图像，则一切正常。

由于我的根目录中没有 assets 文件夹，我在 src 文件夹中创建了一个。

结构：

? node_modules
? src
   ? app
      ? components
         ? home
           home.component.html
           home.component.scss
           home.component.spec.ts
           home.component.ts
   ? assets
      ? images
         ? bg.jpg

.angular-cli.json

  "assets": [
    "assets",
    "images",
    "favicon.ico"
  ],

主页.component.scss

.homeBg {
  background-image: url('../../../assets/images/bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  width: 100vw;
  height: 100vh;
}

有人可以帮助我并告诉我我做错了什么吗？我花了将近 3 个小时试图弄清楚这一点。

提前致谢。

我在工具栏中有一个标准的 Angular Material Menu...

    <button mat-icon-button #videoMenu #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="vidmenu" matTooltip="Watch videos" class="toolbar-btn"
(click)="onShowVid()">
    <mat-icon [style.color]=vidIconColor [style.background-color]=vidIconBackcolor>local_movies</mat-icon>
</button>
&emsp;
<mat-menu #vidmenu="matMenu">
    <button mat-menu-item>
        <img src="assets/images/vid_welcome.jpg" height=40px/>
        <span> Welcome</span>
    </button>
    <button mat-menu-item>
            <img src="assets/images/vid_video1.jpg" height=40px/>
            <span>Video 1</span>
        </button>
    <button mat-menu-item>
        <img src="assets/images/vid_video2.jpg" height=40px/>
        <span>Video 2</span>
    </button>
</mat-menu> 

在测试中，无论我们制作多大的材质菜单图标，用户都看不到它。一位用户建议我们在打开菜单的情况下开始体验……这样他们就可以看到选项，点击一个，然后菜单关闭。然后他们就会知道它在那里供将来使用。

我已经研究过在 ngOnInit() 期间远程触发 click() 以打开它，但所有示例都是旧的 angular 版本，即使我让它工作，我猜它也会有问题。

有没有办法简单地将菜单设置为“打开”的默认状态，然后从那里正常运行？

我正在使用 angular5 制作白标 PWA。我想知道是否可以根据 URL 中的信息动态更改清单文件中的 png 图标。我想为每个独特的组织使用不同的图标。

喜欢：

1. www.mywebsite.com/organisation1
2. www.mywebsite.com/organisation2

URL 1 安装在浏览器上时应该得到一个不同的图标，然后是 URL2。我不知道如何使这项工作以及是否可能。

我在我的 users.component.ts 中使用了 setTimeout 方法，但不起作用，并且无法找到模块“计时器”错误

我导入此代码但不起作用

import { setTimeout } from 'timers'

我正在使用 angular 5 的WEB银行应用程序工作。任务是我想找出计算机的设备 ID 和浏览器名称。

我试过这个 NPM 模块：

npm install ngx-device-detector --save

import { NgModule } from '@angular/core';
  import { DeviceDetectorModule } from 'ngx-device-detector';
  ...
  @NgModule({
    declarations: [
      ...
      LoginComponent,
      SignupComponent
      ...
    ],
    imports: [
      CommonModule,
      FormsModule,
      DeviceDetectorModule.forRoot()
    ],
    providers:[
      AuthService
    ]
    ...
  })

import { Component } from '@angular/core';
  ...
  import { DeviceDetectorService } from 'ngx-device-detector';
  ...
  @Component({
    selector: 'home',  // <home></home>
    styleUrls: [ './home.component.scss' ],
    templateUrl: './home.component.html',
    ...
  })

  export class HomeComponent {
    deviceInfo = …