Biến toàn cục góc 4/5/6

116

Tôi thực sự gặp khó khăn với việc tạo các biến toàn cục trong ứng dụng Angular 2 của mình.

Tôi đã sử dụng Google và đọc nhiều bài đăng trên StackOverflow về vấn đề này trong 3 giờ qua, tuy nhiên, có vẻ như tôi không thể làm cho nó hoạt động. Tôi thực sự mong bạn có thể giúp tôi và tôi xin lỗi vì đã hỏi câu hỏi này.

Vì vậy, tôi có tệp của mình được gọi là domains.ts , trông giống như sau:

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


@Injectable()
export class Globals {

  var role = 'test';

}

Và tôi muốn sử dụng vai trò biến trong chế độ xem HTML của thành phần của tôi như sau:

{{ role }}

Tôi đã thêm tệp global.ts vào app.module.ts của mình theo cách sau:

providers: [
  Globals
],

Bất kể tôi đã làm gì trên tệp này, nó vẫn không hoạt động. Những gì tôi không muốn làm là phải nhập tệp tin global.ts trong mọi thành phần theo cách thủ công, đó là lý do tại sao tôi muốn sử dụng tính năng nhà cung cấp.

Tôi thực sự mong bạn có thể giúp tôi và xin lỗi một lần nữa.

Trân trọng,

AE

angular typescript

— AE
nguồn

4

export class Globals { var role = 'test'; }<- cái gì vậy?

— zerkms

Đó được cho là Globals lớp của tôi, trong đó tôi muốn lưu trữ các biến toàn cục của mình. Ví dụ, biến "role", mà ngay bây giờ phải có một chuỗi "test" trong đó, chỉ để kiểm tra xem các biến toàn cục có hoạt động hay không.

— AE

Tuy nhiên, nó không phải là bảng chữ hợp lệ.

— zerkms

Tôi có nên xóa "var" không?

— AE

sử dụng localStoragethì sao?

— suhailvs

180

Bạn có thể truy cập Globalsthực thể từ bất kỳ điểm nào trên Ứng dụng của mình thông qua chèn phụ thuộc Angular . Nếu bạn muốn xuất Globals.rolegiá trị trong mẫu của thành phần nào đó, bạn nên chèn Globalsqua hàm tạo của thành phần giống như bất kỳ dịch vụ nào:

// hello.component.ts
import { Component } from '@angular/core';
import { Globals } from './globals';

@Component({
  selector: 'hello',
  template: 'The global role is {{globals.role}}',
  providers: [ Globals ] // this depends on situation, see below
})

export class HelloComponent {
  constructor(public globals: Globals) {}
}

Tôi đã cung cấp Globalstrong HelloComponent, nhưng thay vào đó, nó có thể được cung cấp trong một số HelloComponent'sthành phần mẹ hoặc thậm chí trong AppModule. Nó sẽ không thành vấn đề cho đến khi Globalsdữ liệu tĩnh duy nhất của bạn không thể thay đổi được (giả sử chỉ có hằng số). Nhưng nếu nó không đúng và ví dụ, các thành phần / dịch vụ khác nhau có thể muốn thay đổi dữ liệu đó, thì dữ liệu đó Globalsphải là một singleton . Trong trường hợp đó, nó phải được cung cấp ở cấp cao nhất của hệ thống phân cấp nơi nó sẽ được sử dụng. Giả sử điều này là AppModule:

import { Globals } from './globals'

@NgModule({
  // ... imports, declarations etc
  providers: [
    // ... other global providers
    Globals // so do not provide it into another components/services if you want it to be a singleton
  ]
})

Ngoài ra, không thể sử dụng var theo cách bạn đã làm, nó phải

// globals.ts
import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  role: string = 'test';
}

Cập nhật

Cuối cùng, tôi đã tạo một bản demo đơn giản trên stackblitz , trong đó đơn lẻ Globalsđang được chia sẻ giữa 3 thành phần và một trong số chúng có thể thay đổi giá trị của Globals.role.

— dhilt
nguồn

3

Nhưng khi tôi lấy nó trong một thành phần khác (cái gì đó = perfals.role;), tôi nhận được 'test' .. Không phải giá trị tôi đã gán cho nó.

— punkouter

3

@punkouter Tôi đã cập nhật câu trả lời bằng liên kết demo Plunker. Hy vọng nó sẽ giúp ích cho bạn!

— dhilt

3

Đây là một chủ đề hơi cũ nhưng tôi chỉ muốn nói rằng tôi yêu bạn. Đã lưu ngày của tôi!

— Nie Selam

2

@AtulStha Tôi vừa chuyển bản demo từ Plunker sang Stackblitz, cảm ơn vì sự cố này.

— dhilt

1

@GauravSachdeva Bạn có thể đăng vấn đề của mình dưới dạng một câu hỏi riêng trên SO, tôi tin rằng đó sẽ là lựa chọn tốt nhất. Thêm liên kết đến nó trong bình luận nếu bạn muốn tôi xem trên đó.

— dhilt

22

Tôi sử dụng môi trường cho điều đó. Nó hoạt động tự động và bạn không phải tạo dịch vụ có thể tiêm mới và hữu ích nhất đối với tôi, không cần nhập qua hàm tạo.

1) Tạo biến môi trường trong môi trường của bạn.

export const environment = {
    ...
    // runtime variables
    isContentLoading: false,
    isDeployNeeded: false
}

2) Nhập môi trường.ts trong tệp * .ts và tạo biến công khai (tức là "env") để có thể sử dụng trong mẫu html

import { environment } from 'environments/environment';

@Component(...)
export class TestComponent {
    ...
    env = environment;
}

3) Sử dụng nó trong mẫu ...

<app-spinner *ngIf='env.isContentLoading'></app-spinner>

trong * .ts ...

env.isContentLoading = false

(hoặc chỉ môi trường.isContentLoading trong trường hợp bạn không cần nó cho mẫu)

Bạn có thể tạo tập hợp các hình cầu của riêng mình trong môi trường. Tương tự như vậy:

export const globals = {
    isContentLoading: false,
    isDeployNeeded: false
}

và nhập trực tiếp các biến này (y)

— Martin Slavkovsky
nguồn

1

Còn khi bạn thực hiện sản xuất xây dựng thì sao? Bạn có mọi thứ ở hai nơi?

— Mulperi

2

Đây là cách tốt nhất. @Mulperi Không cần thiết để tạo hình cầu trong môi trường.ts. Chỉ cần tạo một tập tin global.ts trong thư mục ứng dụng với các lần xuất ở trên và nhập tệp này vào nơi bạn muốn sử dụng các hình cầu đó.

— PrasadW 22/09/18

1

Tôi đồng ý. Gần đây tôi đã sửa đổi giải pháp này chính xác như @PrasadW đã chỉ ra.

— Martin Slavkovsky,

Các phiên bản Angular mới hiện sử dụng chính xác cách tiếp cận đó theo mặc định. Có một environments/environment.tsvà environments/environment.prod.tsđược thay thế tự động.

— rugk

0

Không thực sự được khuyến nghị nhưng không có câu trả lời nào khác thực sự là biến toàn cục. Đối với một biến toàn cục thực sự, bạn có thể làm điều này.

Index.html

<body>
  <app-root></app-root>
  <script>
    myTest = 1;
  </script>
</body>

Thành phần hoặc bất kỳ thứ gì khác trong Angular

.. đứng đầu ngay sau khi nhập khẩu:

declare const myTest: any;

...một lát sau:

console.warn(myTest); // outputs '1'

— Helzgate
nguồn

-2

Bạn có thể sử dụng đối tượng Window và truy cập nó ở mọi nơi. ví dụ window.defaultTitle = "tiêu đề của tôi"; thì bạn có thể truy cập window.defaultTitle mà không cần nhập bất cứ thứ gì.

— Justice Addico
nguồn

Đây là những gì nó muốn tránh.

— Scandinave