Home / Questions / 18118
Accepted
Jose Hermosilla Rodrigo
Asked: 2020-07-30 06:28:07 +0800 CST 2020-07-30 06:28:07 +0800 CST

Angular 2 - 组件中的动态变量

  • 772

我正在尝试在 Angular 2 中创建一个组件。该组件有一个变量title，其值显示在模板的一部分中：

import { Component, ViewChild } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';

declare var ol: any;

@Component({
  selector: 'map',
  template: `
  <div id="container">
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <strong class="navbar-brand">{{title}}</strong>
        </div>
      </div>
    </nav>
    <div id="down" #mapa style="max-height : 500px;">
    </div>
  </div>
  `
})
class MapaComponent {
  @ViewChild('mapa') mapa;
  map  : any;

  title : string = 'Mi mapa';

  /* Contructor */
  constructor() {}

  ngAfterViewInit() {
    this.map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: this.mapa.nativeElement,
      view: new ol.View({...})
    })
  }
}

bootstrap(MapaComponent, []); // Component is bootstrapped!

我想要做的是为创建的每个组件修改所述变量的值，我想知道是否可以通过Component以下方式将所述变量的值声明为属性来以某种方式完成：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mapa</title>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>

    <script src="systemjs.config.js"></script>

    <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>

    <script>
      System.import ('built/map')
        .then(null, console.error.bind(console));
    </script>

  </head>
  <body>
    <!-- Componente creado -->
    <map title = "Mapa A"></map>

    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">


  </body>
</html>

是否可以通过这种方式修改title变量的值？

javascript

1 Answers

  1. Best Answer

    您必须使用以下类 ElementRef 并使用它。

    索引.html

    <html>
    <head>
        <title>Prueba</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/app.css">
    </head>
    <body id="homepage">

        <div class="home-panel" id="panel-main">
            <params-app valor="4">Loading...</params-app>
        </div>

        <!--<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>-->
        <!-- Latest compiled and minified JavaScript -->
        <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
    </body>
</html>

    角度.ts

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

@Component({
  selector: 'params-app',
  templateUrl: 'app/src/cuadro.html'
})

export class AppComponent  {
    valor: number;

    constructor( public elementRef: ElementRef ){
        let native = this.elementRef.nativeElement;
        this.valor = native.getAttribute("valor");
        console.log( "valor", this.valor );
    }

}

    您应该只将其与启动应用程序的“组件”一起使用，因为如果您在上面放置的方法有效，则 ElementRef 类可能会导致您的 Web 应用程序出现安全问题，请查看以下链接以获取更多信息。

    链接 API 角度 2

    问题文档

    您可以做的另一个解决方案是创建一个子组件，从而避免使用不安全的类。

    index.html（没有太多变化）

    <html>
    <head>
        <title>Prueba</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/app.css">
    </head>
    <body id="homepage">

        <div class="home-panel" id="panel-main">
            <params-app>Loading...</params-app>
        </div>

        <!--<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>-->
        <!-- Latest compiled and minified JavaScript -->
        <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
    </body>
</html>

    start.ts（我们将新组件称为 MapasComponent ）

    import { Component } from '@angular/core';
import { MapasComponent } from './mapas';

@Component({
  selector: 'params-app',
  templateUrl: 'app/src/cuadro.html',
  directives: [MapasComponent]
})

export class AppComponent  {
    valor: number;
    opciones: string[] = ["America", "Asia"];

    constructor(){

    }

}

    app/src/frame.html（我们将选项发送给子组件）

    <div class="container panel-head">

    <div class="row">
        <div class="col-md-12">
            <h1>Ejemplo</h1>
        </div>
        <mapas-app [opciones]="opciones[0]"></mapas-app>
        <mapas-app [opciones]="opciones[1]"></mapas-app>
    </div>

</div>

    maps.ts（这里我们创建地图组件，使用“inputs”参数发送数据）

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

@Component({
  selector: 'mapas-app',
  templateUrl: 'app/src/mapas.html',
  inputs: ['opciones']
})

export class MapasComponent  {

    constructor(){
        //
    }

}

    app/src/maps.html（我们打印选项）

    <p>Soy un mapa con opciones: {{ opciones }}</p>

    干杯!

    • 4