Можем ли мы сделать динамический путь c в angular? Если нет, какой должен быть подход? - PullRequest
Новая
       2

Можем ли мы сделать динамический путь c в angular? Если нет, какой должен быть подход?

0 голосов
/ 24 февраля 2020

Я хочу получить данные из базы данных Firebase в реальном времени, нажав кнопку Просмотреть лоты. Я дал путь как /plats/bigfork/lots. Так что это просто получение данных bigfork. Но, как мы видим, это состояние c. Так, как я могу сделать динамический c я вместо bigfork, чтобы я мог получить данные относительно того, на что я нажал.

Editlots - это страница html, на которой Я хочу отобразить данные.

Component.ts 

 this.itemRef = db.list('/plats/bigfork/lots');
 this.lot$ = this.itemRef.snapshotChanges().map(actions => {
    return actions
       .map(action => ({ 
                key: action.payload.key, 
                ...action.payload.val() 
        }));  
 });

Component. html

<div class="col-md-3">
  <button type="button" 
          routerLink="editlots" 
          class="btn btn-info" 
          style="font-size: 15px; text-align: center; margin:0 auto; display: block;">
      View Lots
  </button>
</div>

1 Ответ

0 голосов
/ 25 февраля 2020

Для этого у нас есть три метода. Они объясняются один за другим ниже.

Первый метод: Создайте файл переменной среды env-var.service.ts и объявите свои динамические значения c переменная. Используйте эту переменную в вашем файле .ts. Вы можете изменить его, когда вам нужно.

env-var.service.ts 

import { Injectable } from '@angular/core';
@Injectable()
export class EnvVarService {
  public route = 'bigfork';
  constructor() { }
}

component.ts 

import { Component, OnInit } from '@angular/core';
import { EnvVarService } from './env-var.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  itemRef: any;

constructor (
  private _env_var: EnvVarService
) {

}
  myFunc() {
    this.itemRef = db.list(`/plats/` + this._env_var.route  + `/lots`);
    // ... Further code
  }
}

HTML будет таким же, как вы описали.

Второй метод: Создайте JSON, в котором вы можете сохранить все маршруты на основе некоторого условия, а затем получить исправленный маршрут в зависимости от состояния. Вы также можете сохранить это JSON вне этого файла.

component.ts 

import { Component, OnInit } from '@angular/core';
import { EnvVarService } from './env-var.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  itemRef: any;

  json = { "cond1": "/plats/bigfork/lots", "cond2": "/plats/def/lots", "cond3": "/plats/abc/lots" }

constructor () {}

  myfunc(condition) {
    let route_value = '';
    for (let key in this.json) {
      if (key == condition) {
        route_value = this.json[key];
      }
    }
    this.itemRef = db.list(route_value);
  }
  // Rest code will be same
}

HTML будет таким же.

Третий метод: ** Вы также можете принять его от пользователя. ** component.ts 

import { Component, OnInit } from '@angular/core';
import { EnvVarService } from './env-var.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  itemRef: any;
  id: any;
constructor () {}
  myFunc() {
    this.itemRef = db.list(`/plats/` + this.value  + `/lots`);
  }
  // Rest code will be same
}

component. html

<div class="col-md-3">
  <input class="form form-control" style="display:inline" type="text" [(ngModel)]="id">
  <button type="button" 
          routerLink="editlots" 
          class="btn btn-info" 
          style="font-size: 15px; text-align: center; margin:0 auto; display: inline;">
      View Lots
  </button>
</div>
...