Angular 我们能使路径在角度上是动态的吗？如果不是，应该采取什么方法？

我想通过单击“查看批次”按钮从firebase实时数据库检索数据。我将路径指定为

/plats/bigfork/lots

。所以它只是检索bigfork的数据。但正如我们所看到的，它是静态的。那个么我怎样才能用动态的I'd来代替bigfork，这样我就可以检索我点击的I'd的相关数据了

Editlots是我想在其中显示数据的html页面

组件。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">
  <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>

观景区

要实现这一点，我们有三种方法。下面逐一解释。

第一种方法：创建环境变量文件env-var.service.ts并声明动态变量。在.ts文件中使用此变量。您可以在需要时更改它

env-var.service.ts

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

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
  }
}

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
}

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
}

组件。ts

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

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
  }
}

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
}

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
}

HTML将与您描述的相同

第二种方法：制作一个JSON，您可以根据某个条件存储所有路由，然后根据条件获取正确的路由。您还可以将此JSON存储在此文件之外

组件。ts

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

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
  }
}

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
}

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
}

HTML将是相同的

第三种方法：**您也可以从用户处获取输入。 **组件.ts

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

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
  }
}

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
}

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>

观景区

@georgeawg您能帮我一下吗？将环境设置为变量文件。在此文件中，您可以根据条件声明不同的路由。或者另一种解决方案是制作一个JSON，您可以根据某些条件在其中存储所有路由。e、 g

{“cond1”：“/plats/bigfork/lots”，“cond2”：“/plats/def/lots”，“cond3”：“/plats/abc/lots”}

我在第一种方法中没有得到它值是什么？因为类型“EnvVarService”上不存在属性“value”，所以我得到了错误。对不起，是这样的。_env_var.routeAnd在第二个方法中，button click如何在不更改html的情况下获得我正在单击的id？先生，通过传递这个属性，我得到了相同的结果。_env_var.route作为bigfork是可以的，但是如果我传递route={{it.key}我不想只检索bigfork的数据，我想让它成为动态的，这样我就可以访问动态id的数据