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!

Что я хочу сделать, так это изменить значение указанной переменной для каждого созданного компонента, и мне было интересно, можно ли это сделать каким-то образом, объявив значение указанной переменной как атрибут a 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, и поэтому вы его используете.

    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 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 может вызвать проблемы с безопасностью в вашем веб-приложении, проверьте следующие ссылки для получения дополнительной информации.

    Ссылка API angular 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