标签: angular7

我在我的应用程序中使用谷歌地图 API，如下所示：

在 index.html 中使用 api 键导入 url ：

<script src="https://maps.googleapis.com/maps/api/js?key=myKey"></script>

并在组件中像这样声明谷歌：

declare let google: any;

并在这样的组件中使用它：

this.map = new google.maps.Map(document.getElementById('googleMap'), this.mapProp);

如何动态更改 index.html 中存在的 API 密钥？

我在项目文件夹中并在控制台中执行以下语句：

ng serve --configuration=de

执行因错误而中断：

ERROR in xliff parse errors: Message ... misses a translation

翻译是可用的。问题是什么？

您可以通过从我的存储库Bitbucket Repository 中检出应用程序来重现它并运行。

先感谢您。

我无法将路由参数检索为空。我正在使用 angular7。请找到下面的代码

HeaderComponent ts 文件

    import {Router, ActivatedRoute} from '@angular/router';
    constructor(private httpService: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
             this.getNewsSelectedFromRouteParam();
        }
    getNewsSelectedFromRouteParam() {
            alert();
            let id = this.activatedRoute.snapshot.paramMap.get('typeId');
            alert(id);
        }
getNewsByCountry(newsTypeSelected: any) {
        this.router.navigate(['/news',newsTypeSelected]);
        this.getNewsSelectedFromRouteParam();
    }

标题html

<div class=" dropdown-toggle" data-toggle="dropdown">
                XXX
            </div>
            <div class="dropdown-menu">
                <div *ngFor="let cr of country" class="dropdown-item"
                    (click)="getNewsByCountry(cr.value)" >{{cr.name}}</div>
            </div>

应用路由ts文件

 const routes: Routes = [
        { path: 'news/:typeId', component: XxxComponent },
    { path: '**', component: XxxComponent }
    ];

我目前使用 angular ver 7 和 angular cli 以及 angular material 最新版本

使用带有粘性列位置的角度表时，我说到点子上了

<ng-container matColumnDef="name" sticky>
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

<ng-container matColumnDef="address" sticky>
      <th mat-header-cell *matHeaderCellDef> Address</th>
      <td mat-cell *matCellDef="let element"> {{element.address}} </td>
    </ng-container>

但是当我在浏览器中提供它时，粘性列都搞砸了，它们之间有一些空间，所以当我向右滚动时，动画看起来很糟糕

这是使用 2sticky 的正确方法吗？

Heroku 部署失败。一直在查看其他类似的堆栈溢出帖子并更改 package.json 文件尝试解决方案，这些解决方案对其他人没有运气。我不确定这是端口问题，还是 package.json 问题或完全不同的问题。非常感谢任何帮助、提示或建议！

Heroku logs: 

2019-02-09T08:32:56.609533+00:00 heroku[web.1]: State changed from crashed to starting
2019-02-09T08:33:00.956199+00:00 heroku[web.1]: Starting process with command `npm start`
2019-02-09T08:33:03.430137+00:00 heroku[web.1]: State changed from starting to crashed
2019-02-09T08:33:03.257739+00:00 app[web.1]: 
2019-02-09T08:33:03.257781+00:00 app[web.1]: > the-lottery-genie-mean@0.0.0 start /app
2019-02-09T08:33:03.257783+00:00 app[web.1]: > ng serve
2019-02-09T08:33:03.257784+00:00 app[web.1]: 
2019-02-09T08:33:03.294426+00:00 app[web.1]: sh: 1: ng: not found
2019-02-09T08:33:03.304958+00:00 app[web.1]: npm ERR! file sh
2019-02-09T08:33:03.305986+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-02-09T08:33:03.306367+00:00 app[web.1]: npm ERR! errno ENOENT
2019-02-09T08:33:03.309015+00:00 app[web.1]: npm ERR! syscall spawn
2019-02-09T08:33:03.310700+00:00 app[web.1]: …

我在 ion-slide 里面有一个组件，它是滚动不起作用

这是我的代码：

{{标签}}

<ion-slide style="height:100%">
  <main-search></main-search>
</ion-slide>

<ion-slide>

    <div style="height:100%">Page 2 </div>

</ion-slide>

在 Angular 7 单元测试中，有没有办法async( async(){} )在将异步支持与async..await关键字结合使用时避免双重语法？

我是 angular 的新手，但我是一位经验丰富的程序员，而且我无法选择我喜欢的测试风格。

我想async..await在测试中安全使用，并且我理解以下语法。然而，当指导开发人员接触现代 javascript 和/或async..await双重async(async())语法的概念时，对他们来说是多余的和令人困惑的。他们忽略了外部异步。服务中抛出的异常会导致在实际测试之外报告失败，这很难追踪。

似乎以下之一会更好：

1. it()应该神奇地支持async..await和包装我的回调，async()这样我就不必考虑它了。
2. it()应该采用一个可选的函数参数（即，asyncor fakeAsync）来包装我的回调。
3. it()变化ita()并且itfa()应该存在，它将用适当的异步助手包装我的回调。
4. it()用 包装我的回调async，另外一个itf()将我的回调包装在fakeAsync.

我是否缺少现有的概念或语法？有更好的选择吗？

    import { async } from '@angular/core/testing';

    describe('MyService', () => {
        let service: MyService;

        ...

        it('should get data', async( async() => {
            // arrange
            let expectedData = { answer: 42 …

我是 angular 7 的新手，现在正在尝试实现 CanActive，但我收到错误：

谁能指导我克服这个问题。我的代码示例如下：

auth.guard.ts ：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth-service.service';
import {Router} from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService,
              private myRoute: Router){
  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.auth.isLoggednIn()){
      return true;
    } else {
      this.myRoute.navigate(["login"]);
      return false;
    }
  }
}

我正在尝试实现一个菜单，其中包括 Angular 应用程序中最近访问过和最常访问的页面。如何获取导航堆栈？或者我是否需要挂钩navigationStart事件并在创建时对其进行编译？

我成功地将 Angular 7 组件降级为 Angular 1，但我遇到了一个小问题，我尝试通过多种方法解决。

我的降级组件的输出参数如下：

@Output()isValid = new EventEmitter<boolean>();

它的触发方式如下：

this.isValid.emit(false);

在我的 Angular 1 组件中，我将其降级后使用如下：

• 在模板中：

<downgrade-employee-selector (is-valid)="{{vm.validateEmployeeSelector($event)}}"> </downgrade-employee-selector>

• 在 ts：

self.validateEmployeeSelector = ($event) => {console.log($event);}

它工作正常，但在 Angular 1 函数$event值始终未定义，我无法理解它是如何工作的。