Angular 8 Typescript Как установить значение константы экспорта из другого компонента?

Question

Я хотел бы изменить значение переменной с именем bdg_m_1 из другого компонента. Я могу изменить значение bdg_m_1 из того же файла машинописного текста .. Вот мой код ..

Имя файла: nav.ts

var bdg_m_1:string = "10" ; // HOW TO CHANGE THIS VALUE FROM ANOTHER COMPONENT

export const navItems: INavData[] = [
  {
    name: "Menu 1",
    url: "/menu_1",
    icon: "icon-speedometer",
     badge: {
       variant: 'info',
       text: bdg_m_1, 
     }
  }, 
];

Answer 1

Вы можете ввести следующий код в nav.ts

let config = {
    bdg_m_1 : "10",
    navItems: [{
        ...
    }]
}
module.exports = config;

И если вы хотите включить объект конфигурации,

var Config = require('nav.ts');
console.log(Config.bdg_m_1);

Answer 2

Вам просто нужно экспортировать его, а затем импортировать в компонент, который вы хотите изменить.

Объявление:

export let bdg_m_1:string = "10" ;

Другой компонент:

import bdg_m_1 from 'nav.ts';

bdg_m_1 = '11';

РЕДАКТИРОВАТЬ: Вышеупомянутое «решение» на самом деле неверно. Однако я оставляю его на месте, потому что он поучителен в отношении того, что противоречит интуиции о том, как работает импорт / экспорт Typescript.

См. это объяснение для хорошего объяснения того, что происходит .

В результате в модуле импорта big_m_1 на самом деле является привязкой, а не переменной. Фактически, он доступен только для чтения.

То, что вы, по-видимому, можете сделать, это:

import thing = require('./nav.ts');
thing.bdg_m_1 = '11';

Удачи.

Answer 3

У меня есть другое предложение для этого: вы делаете свой ts-файл инъекционным и создаете метод для обновления значения вашей переменной и используете этот метод в другом вашем компоненте для обновления значения. ваша служба будет выглядеть примерно так.

@Injectable()
export class MyService {

 bdg_m_1 : string = '10';
 navItems: INavData[] = [
     {
        name: "Menu 1",
        url: "/menu_1",
        icon: "icon-speedometer",
        badge: {
          variant: 'info',
          text: bdg_m_1, 
      }
   }, 
   ];
  constructor(){}
  setValue(value: string){
           this.bdg_m_1 = value;
     }
  getNavItems(){
  return this.navItems;
    }
   }

И получите экземпляр этой службы в другом компоненте и вызовите метод setValue, чтобы изменить значение bdg_m_1.

Итак, добавьте следующий код в ваш компонент:

constructor(private myService: MyService){
   this.myService.setValue('abc');
  }

Answer 4

Вы не можете изменить значение переменной из любого другого компонента, так как эта переменная недоступна из этого компонента.

Вам не нужно делать ничего большого. Вам просто нужно экспортировать эту переменную и импортировать ее в другой компонент.

Export bdg_m_1:string = '10'

И импортировать переменную с помощью.

import bdg_m_1 from nav.ts

И изменить значение из другого компонента с помощью.

bdg_m_1 = 'abc'

Вы также можете изменить имя при импорте переменной, используя:

import bdg_m_1 as myConst from nav.ts
myConst = 'abc'

Answer 5

На самом деле вы хотите управлять (глобальным) состоянием вашего приложения.

Вариант 1 : Использование вложенных компонентов

Если у вас есть родитель - и дочерний компонент, просто используйте EventEmitters . Может выглядеть так:

nav.ts

export enum MenuName = {
  Menu1 = 'Menu 1',
  Menu2 = 'Menu 2'
}

export const navItems: INavData[] = [
  {
    name: MenuItem.Menu1,
    ...
  }, 
];

child.component.ts

@Output() badgeChange = new EventEmitter<{menuName: MenuName, value: string}>();

private updateBadge(menuName: MenuName, value: string) {
  this.badgeChange.next({menuName, value});
}

и слушайте к изменению в ваших родителях HTML: <app-child (badeChange)="onBadgeChanged($event)"></app-child> и в TS:

onBadgeChanged(change: {menuName: MenuName, value: string}): void {
  // find menu item by `change.menuName`
  // update it's badge value
}

Вариант 2 : Используйте сервис для глобального состояния

Если ваш глобальный состояние простое, вы также можете использовать службу для своего состояния:

nav-service.ts

export class NavService {
  navData$ = new BehaviourSubject<INavData[]>([
    {
      name: "Menu 1",
      ...
    }, 
  ]);

  updateBadge(menuItemName: string, value: string): void {
    // find menu item by `menuItemName` in `this.navData$.value`
    const menuItem = ...;
    if (menuItem) {
      menuItem.badge.text = value;
      this.navData$.next([...this.navData$.value]); // emit new nav data
    }
  }
}

В этом случае ваш компонент меню будет слушать при изменении this.navService.navData$, а компонент или служба, обновляющая данные, использует this.navService.updateBadge(...), чтобы сообщить всем, что значение изменилось.

Вариант 3 : использовать библиотеку управления состоянием

Если ваше состояние сложнее, чем просто меню, я бы предложил использовать библиотеку состояний, такую ​​как NgRx , NgXs или Akita . Перейдите по ссылкам, чтобы узнать о них больше, я использую NgRx для своих проектов. Идея аналогична использованию собственной службы для состояния, за исключением того, что все состояние хранится в одном объекте состояния, и эти библиотеки вводят более сложные концепции.

Answer 6

Вы можете отправить его через eventEmitter, если они связаны с родителями и детьми. Вот пример на stackblitz и код в случае, если он не работает:

child-component.ts:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  nameToSend = '';
  @Output() newNameEmitter = new EventEmitter<string>();

  emitNewName () {
    this.newNameEmitter.emit(this.nameToSend);
  }
}

chil-component. html:

<input type="text" [(ngModel)]="nameToSend"/>
<button (click)="emitNewName()">Send new name</button> 

app.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  changeName(newName: string){
    this.name = newName;
  }
}

app. html:

<app-child (newNameEmitter)="changeName($event)"></app-child>
<br>
name = {{name}}

Принцип состоит в том, чтобы генерировать значение в любое время. вы ловите его в родительском с помощью (newNameEmitter)="changeName($event)" (app. html)