Угловой 2 - динамическая Переменная в Компоненте

Я стараюсь реализовывать Компонент в Угловом 2. У этого компонента есть переменная title, стоимость которого появляется в части template:

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, таким образом?

2
задан 28.03.2017, 03:51
1 ответ

ты, должно быть, используешь следующий класс ElementRef и asГ - ты это используешь.

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>

angular.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 );
    }

}

одинокое ты это, должно быть, используешь с "компонентами", которые инициализируют ее aplicaciГіn, так как с составляющими детьми, если они функционируют метод, что colocastes ранее, класс ElementRef podrГ,, - которые быть должен вызывать у тебя проблемы безопасности в тебе aplicaciГіn Веб, проверяет следующие соединения для больше informaciГіn.

Соединение угловой API 2

DocumentaciГіn проблемы

Другая soluciГіn, который ты можешь делать, та creaciГіn составляющего сына и asГ - ты избегаешь использовать небезопасные классы

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>

inicio.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/cuadro.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>

mapas.ts (AquГ - мы создаем компонент карт, с параметром "inputs" мы посылаем данные)

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

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

export class MapasComponent  {

    constructor(){
        //
    }

}

app/src/mapas.html (мы печатаем выборы)

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

типов Привета!

4
ответ дан 24.11.2019, 13:45
  • 1
    Думал о чем-то эксперт и # 237; когда я смогу подтверждать это, я сообщаю тебе. Спасибо!! – Jose Hermosilla Rodrigo 31.07.2016, 00:44