角度2如何更改输入属性的内部属性答案

【问题标题】：angular 2 how to change inner attribute of input property角度2如何更改输入属性的内部属性
【发布时间】：2018-08-13 08:22:01
【问题描述】：

我已经创建了滑块的输入属性 @Input('inputSlider') inputSlider: SliderComponent; 我只想更改每个不同组件中的 imageurls 数组（属性）可能吗？如果可以，我该怎么做

import { AboutComponent } from './../about/about.component';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent  { 

  @Input('inputSlider') inputSlider: SliderComponent;

  height: string = '400px';
  minHeight: string;
  arrowSize: string = '30px';
  showArrows: boolean = false;
  disableSwiping: boolean = false;
  autoPlay: boolean = true;
  autoPlayInterval: number = 3333;
  stopAutoPlayOnSlide: boolean = true;
  debug: boolean = false;
  backgroundSize: string = 'cover';
  backgroundPosition: string = 'center center';
  backgroundRepeat: string = 'no-repeat';
  showDots: boolean = false;
  width: string = '100%';
  reloded: boolean = true;

  imageUrls = [
    'https://cdn.vox-cdn.com/uploads/chorus_image/image/56748793/dbohn_170625_1801_0018.0.0.jpg',
    'https://cdn.vox-cdn.com/uploads/chorus_asset/file/9278671/jbareham_170917_2000_0124.jpg',
    'https://cdn.vox-cdn.com/uploads/chorus_image/image/56789263/akrales_170919_1976_0104.0.jpg',
    'https://cdn.vox-cdn.com/uploads/chorus_image/image/56674755/mr_pb_is_the_best.0.jpg'
  ];
 

}

<slideshow #slideshow [imageUrls]="imageUrls" [height]="height" [minHeight]="minHeight" [arrowSize]="arrowSize" [showArrows]="showArrows"
[disableSwiping]="disableSwiping" [autoPlay]="autoPlay" [stopAutoPlayOnSlide]="stopAutoPlayOnSlide" [debug]="debug" [backgroundSize]="backgroundSize"
[backgroundPosition]="backgroundPosition" [backgroundRepeat]="backgroundRepeat" [showDots]="showDots">
</slideshow>

【问题讨论】：

标签： angular angular2-routing angular-directive angular-components

【解决方案1】：

我收到了您的问题，但是您的代码中存在一些不匹配，例如您创建的组件是“app-slider”模板和您使用的 CSS“slider.component.*”以及您拥有的 HTML 代码所以无法完全做到这一点。但是，是的，无论您想做什么，非常简单的输入和输出都是这种行为的主要特征。如果您可以提供正确的代码和结构，我可以为您提供更多帮助。作为参考，您可以查看以下链接： https://www.concretepage.com/angular-2/angular-2-input-and-output-example https://angular.io/guide/component-interaction

谢谢

【讨论】：