标签: angular7

Angular 7共享服务不共享

我是角度新手,我试图在导航后将数据从一个组件(HomeComponent)传递到另一个组件(ProfileComponent)。

我创建了一个共享服务(DataService)。我在 HomeComponent 和 ProfileComponent 中都注入了服务,但是当我在 HomeComponent 中设置消息属性的值并尝试在 ProfileComponent 中检索它时,该值未定义,因为 DataService 不是同一个实例。

DataService 已在提供者数组中的 AppModule 中注册,因此它应该是共享服务并且始终是相同的实例,对吗?

提前致谢

数据服务.ts

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  message:string;

  constructor() { }
}
Run Code Online (Sandbox Code Playgroud)

HomeComponent.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data/data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private data:DataService) { }

  ngOnInit() {
    this.data.message = "hello world";
  }

}
Run Code Online (Sandbox Code Playgroud)

ProfileComponent.ts

javascript angular angular7

1
推荐指数
1
解决办法
9458
查看次数

如何从打字稿中的数组中获取键

value =   {
     5c03dbc3d8e3e3435f875a46: "1", 
     5c03dc0fd8e3e3435f875a48: "2", 
     5c03dc30d8e3e3435f875a49: "3", 
     5c03dc5fd8e3e3435f875a4a: "4"
     }
Run Code Online (Sandbox Code Playgroud)

我有一个这样的数组。我想从这个数组中获取键,以便我可以使用它来获取与这些键关联的值。这一切都是为了打字稿。

typescript angular7

1
推荐指数
1
解决办法
1万
查看次数

Ionic 4 beta 18 - 带 routerLink 的 ion-item 和 ion-button 不会更改路线

我刚刚从 ionic 4 beta 17 更新到 18,并引入了一个重大<ion-item>变化<ion-button>。href已替换routerLink

我将其添加到我的代码中,现在路由不再起作用。大多数情况下,编译器会抛出错误并提示,ion-item 中不存在 routerLink。

我做错了什么?还是有棱角的?

"@ionic/angular": "~4.0.0-beta.18",
"@ionic/core": "~4.0.0-beta.18",
"@angular/core": "^7.1.3",
"@angular/router": "~7.1.3",

<ion-item text-wrap class="nav-item" routerDirection="forward" 
        [routerLink]="p.url"
        *ngFor="let p of listOfPages; let i = index"
        [class.active-item]="checkActivePath(p.url)"
        [class.last-item]="i === (listOfPages.length - 1)">
    <ion-label class="nav-label">
        <ion-img [src]="p.icon" class="nav-icon"></ion-img>
        <div class="text-block">
            {{ p.title }}
        </div>
    </ion-label>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

beta ionic-framework angular ionic4 angular7

1
推荐指数
1
解决办法
1万
查看次数

使模块在 Angular 应用程序中全局可用

我有以下模块,我在其他模块上使用哪些组件:

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

import { CommonModule } from '@angular/common';  
import { ClickOutsideModule } from "ng-click-outside";

import { PopupComponent} from './popup.component';

@NgModule({  
  declarations: [
    PopupComponent
  ],      
  imports: [
    CommonModule,
    ClickOutsideModule
  ],  
  exports: [
    PopupComponent
  ],
  providers: []
})

export class PopupModule {}
Run Code Online (Sandbox Code Playgroud)

我有我的应用程序模块:

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

import { AppBrowserModule } from './app-browser.module';
import { AppRoutingModule } from './app-routing.module';

import { HomeModule } from './home/home.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent …
Run Code Online (Sandbox Code Playgroud)

angular angular6 angular7

1
推荐指数
1
解决办法
4013
查看次数

Angular 7拦截器更改标头并再次重试请求

我正在尝试处理响应标头,在某些特定情况下,当刷新令牌从后端发送时,用新令牌替换标头中的旧令牌并再次发送请求。经过数小时的研究,我没有找到任何适用于 Angular 7 的解决方案。我成功拦截请求,但未能成功替换令牌并再次发送相同的请求。

我这样做:

    export class RefreshTokenInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            tap(event => {

            },
            (error: any) => {
                if (error.status == 401 && error.error.token) {
                    // what to do here
                    // error.error.token is new generated token
                }
            })
        );
    }
}
Run Code Online (Sandbox Code Playgroud)

任何帮助表示赞赏。

http-headers angular-http-interceptors angular angular7

1
推荐指数
1
解决办法
4902
查看次数

Angular 2+ - 为 Angular 6 安装哪个 cli 版本?

我已经全局安装了 Angular v7 和 cli,但我需要为项目使用 Angular 6,卸载 Angular cli 后,我需要为 v6 安装哪个版本,以便我使用 ng new 生成的新项目是 Angular 6?

angular6 angular7

1
推荐指数
1
解决办法
3272
查看次数

使用带有子文件夹的 Apache 服务器部署 Angular 7 项目

在子文件夹中使用 Apache 服务器部署 Angular 7 项目

Angular CLI: 7.3.1
Node: 11.1.0
OS: darwin x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.1
@angular-devkit/build-angular     0.13.1
@angular-devkit/build-optimizer   0.13.1
@angular-devkit/build-webpack     0.13.1
@angular-devkit/core              7.3.1
@angular-devkit/schematics        7.3.1
@angular/cli                      7.3.1
@ngtools/webpack                  7.3.1
@schematics/angular               7.3.1
@schematics/update                0.13.1
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0
Run Code Online (Sandbox Code Playgroud)

索引.html:

Angular CLI: 7.3.1
Node: 11.1.0
OS: darwin x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic …
Run Code Online (Sandbox Code Playgroud)

deployment angular angular7

1
推荐指数
1
解决办法
3452
查看次数

如何访问 Angular 中 subscribe 内的变量

我在访问内部订阅的变量时遇到问题。在这里,我包含代码,在 ngOninit 中,我有返回对象的服务,从该对象,我可以获取我想要的 json,然后我尝试将其存储在一个变量中,然后我尝试在外部访问该变量订阅我做不到。那么我如何在订阅之外使用变量呢?

ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    this.dataService.GetFormById(+id).subscribe(response => {
      console.log(response);
      const temp = response['TemplateJson'];
      var Data = temp;
    })

    initJq();
      var formData = Data

      this.formBuilder = (<any>jQuery('.build-wrap')).formBuilder({ formData });

     // Sample code to handle promise to get for data on page load directly
      this.formBuilder.promise.then(formBuilder => {
        console.log(formBuilder.formData);
      });
  }
Run Code Online (Sandbox Code Playgroud)

在 subscribe 内的这段代码中,有变量 Data,在 temp 中我有 json,那么我如何将该数据存储在 formData 变量中。

angular2-routing angular angular7

1
推荐指数
1
解决办法
1万
查看次数

Prevent click event from triggering other click elements undernethe the front element

consider the following structure

<div (click)="setThing(null)">

   <table>
       <tr *ngFor="let item of items"  (click)="setThing(item)">
            <td>{{item.whatever}}</td>
            <td>{{item.whocares}}</td>
       </tr>
   </table>


  <div id="slidein" *ngIf="activeThing">
       {{ activeThing.whatver }}
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

The idea here is that users should be able to click a table row to set an activeThing through a function call. While an activeThing is evaluating to true, it shows this slide in hover from the right (think like a hamburger menu slide in)

The issue here is that the click event on the …

angular angular7

1
推荐指数
1
解决办法
764
查看次数

Angular node_modules/@types 错误(服务构建问题)

之后NPM安装,当我尝试“纳克构建”出现以下错误:

ERROR in node_modules/@types/node/globals.d.ts(713,19): error TS2304: Cannot find name 'bigint'.
node_modules/@types/node/ts3.6/base.d.ts(13,21): error TS2727: Cannot find lib definition for 'esnext.bigint'. Did you mean 'esnext.intl'?
node_modules/@types/node/util.d.ts(119,56): error TS2304: Cannot find name 'BigInt64Array'.
node_modules/@types/node/util.d.ts(120,57): error TS2304: Cannot find name 'BigUint64Array'.
Run Code Online (Sandbox Code Playgroud)

angular angular7 angular-package-format

1
推荐指数
1
解决办法
2952
查看次数