标签: 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 应用程序中带有查询参数的页面时，这些参数最终会消失。

例如，如果我去这里：

http://example.com:8080/TestComponent?OtherName=foo

如果将我重新路由到这里：

http://example.com:8080/TestComponent

因此，由于查询参数被删除，我的订阅ActivatedRoute没有返回任何内容。这是我的路由：

import { Routes } from '@angular/router';
import { TestComponent, PageNotFoundComponent } from './exports/components';

export const ROUTES: Routes = [
    {
        path: 'TestComponent',
        component: TestComponent
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

订阅（route是 的一个实例ActivatedRoute）：

this.route.queryParams.subscribe((params: Params) => {
    if (params && Object.keys(params).length > 0) {
        const OTHER_NAME = params['OtherName'];
    }
});

即使我删除了通配符路径，它仍然会从 URL 中删除参数；因此，它永远不会包含在上述if语句中。如何防止查询参数消失？

我正在开发一个使用 Angular Material V6 的应用程序。我想在材料组件文本框中列出带有标志的国际电话号码。我在互联网上搜索并找到了一个 npm 模块，但它使用的是引导文本组件。我添加了一个截图来看看它。Bootstrap 不同于 angular material 文本框组件。

现在它是：

角材料组件：

示例代码：

<mat-form-field color="warn" class="form-field-width">
 <int-phone-prefix matInput [locale]="'es'"></int-phone-prefix>
</mat-form-field>

错误：

ERROR 错误：mat-form-field 必须包含一个 MatFormFieldControl。

请给我你的建议。提前致谢。

当应用程序在浏览器中加载时，它会发出以下警告。所以无法为 prod ( ng build --aot --prod)创建构建

    It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>'; …

我尝试强制 jHipster 生成的 Angular 5 项目中的日期选择器使用波兰语语言环境，一周和几个月。据我了解有关文档：

https://ng-bootstrap.github.io/#/components/datepicker/examples#i18n

它应该使用默认设置，即：

共享-common.module.ts

...
import { registerLocaleData } from '@angular/common';
import locale from '@angular/common/locales/pl';
...

providers: [
    ...
    {
        provide: LOCALE_ID,
        useValue: 'pl'
    },
],
...
export class TestSharedCommonModule {
    constructor() {
        registerLocaleData(locale);
    }
}

用法

<input id="field_testDate" type="text" class="form-control" name="testDate" 
ngbDatepicker  #testDateDp="ngbDatepicker" [(ngModel)]="tester.testDate"
            required/>

不幸的是它不起作用，我也尝试了不同的方法，例如：

https://angular.io/api/core/LOCALE_ID

或者

https://github.com/NativeScript/nativescript-angular/issues/1147 - 我在这里复制了语言环境文件

你有什么想法可能是错的吗？

更新

我最终是这样解决的：

日期选择器-i18n.ts

import { Inject, Injectable, LOCALE_ID } from '@angular/core';
import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
    en: …