小编San*_*nde的帖子

我有一个ListComponent.在ListComponent中单击某个项目时,该项目的详细信息应显示在DetailComponent中.两者都在屏幕上同时出现,因此不涉及路由.

如何告诉DetailComponent单击ListComponent中的哪个项目？

我考虑过将一个事件发送到父(AppComponent),并让父设置在DetailComponent上使用@Input设置selectedItem.id.或者我可以使用具有可观察订阅的共享服务.

编辑:通过事件+ @Input设置所选项目不会触发DetailComponent,但是,如果我需要执行其他代码.所以我不确定这是一个可以接受的解决方案.

但是这两种方法看起来都比Angular 1的做法复杂得多,这种做法要么通过$ rootScope.$ broadcast或$ scope.$ parent.$ broadcast.

由于Angular 2中的所有内容都是组件,我很惊讶没有关于组件通信的更多信息.

有没有其他/更直接的方法来实现这一目标？

我在ng-for循环中有一组单细胞组件.我已经掌握了一切,但我似乎无法找到合适的东西

目前我有一个

setTimeout(() => {
  scrollToBottom();
});

但是这不会一直有效,因为图像会异步地向下推动视口.

什么是在angular2中滚动到聊天窗口底部的适当方法？

我的AngularJS模板包含一些自定义HTML语法,如:

<su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label>

我创建了一个指令来处理它:

.directive('suLabel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      title: '@tooltip'
    },
    template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
    link: function(scope, element, attrs) {
      if (attrs.tooltip) {
        element.addClass('tooltip-title');
      }
    },
  }
})

一切正常,除了attrs.tooltip表达式,它总是返回undefined,即使该tooltip属性在进行操作时可以从谷歌Chrome的JavaScript控制台中看到console.log(attrs).

有什么建议吗？

更新:Artem提供了一个解决方案.它包括这样做:

link: function(scope, element, attrs) {
  attrs.$observe('tooltip', function(value) {
    if (value) {
      element.addClass('tooltip-title');
    }
  });
}

AngularJS + stackoverflow =幸福

如何使用ngStyle添加背景图像？我的代码不起作用:

this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg';

<div [ngStyle]="{'background-image': url(' + photo + ')}"></div>

可选链接 ( obj?.param1?.param2) 似乎是一个很棒的功能，我真的很想看到它的实现，并最终摆脱嵌套的 ifs、任意函数以及如此简单的操作所不具备的功能。

但是有一个问题，它不起作用。我更新到 Node 12，但仍然出现错误：

var dude = res?.param?.params[0]
SyntaxError: Unexpected token '.'

或者

var dude = res.param?.params[0]
SyntaxError: Unexpected token '.'

问题是什么？

我是否需要更改某些语言配置或下载库以启用此功能？或者它只是还没有出来？

我刚开始使用Angular 2.

我想知道Angular 2中的组件和指令之间有什么区别？

我在父组件中有一个可能由child更改的变量,parent将在视图中使用此变量,因此必须传播更改.

import {Component, View} from 'angular2/core';

@Component({selector: 'parent'})
@View({
    directives: [Child],
    template: `<childcomp></childcomp>`
})
class Parent {
    public sharedList = new Array();
    constructor() {
    }
}


@Component({selector: 'child'})
@View({template: `...`})
class Child {
    constructor() {
        //access 'sharedList' from parent and set values
        sharedList.push("1");
        sharedList.push("2");
        sharedList.push("3");
        sharedList.push("4");
    }
}

我是谷歌地图的新手,我正在努力学习它.

marker = new google.maps.Marker(
{
     map:map,
     draggable:true,
     animation: google.maps.Animation.DROP,
     position: results[0].geometry.location
});

这是我的标记位置,当我初始化标记位置比我知道地名(例如:XY街,纽约),但由于可拖动选项它正在改变,我的问题是我怎么能得到新的地名,我需要什么样的事件处理程序.

我正在使用Angular 2,我需要检测图像加载到图像标签中的时间.有没有这样的事件,例如这样的事情

<img [src]="imagesource" [loaded]="dosomething()">

所以我有这个使用materializecss javascript的滑块组件.所以在渲染之后,我需要执行

$(document).ready(function(){
    $('body').on('Slider-Loaded',function(){
        console.log('EVENT SLIDER LOADED');
        $('.slider').slider({full_width: true});
        $('.slider').hover(function () {
            $(this).slider('pause');
        }, function () {
            $(this).slider('start')
        });
    });
});

但是我不知道将这行放在哪里因为typescript/angular删除模板中的脚本标记.我已经在ts文件中包含了JQuery,并且希望使用事件系统,但这似乎不起作用.有任何想法吗？这是ts文件的代码:

/// <reference path="../../typings/main.d.ts" />
import {Component, Input} from 'angular2/core';
import { RouterLink } from 'angular2/router';
import {ServerService} from './server';


@Component({
    selector: 'slider',
    templateUrl:'/app/template/slider.html',
    directives: [  ],
})

export class SliderComponent {
    @Input() images;
    private server: ServerService;
    public constructor(server: ServerService){
        this.server = server;
    }

    ngOnInit() {
        console.log("THROWING EVENT");
        $('body').trigger('Slider-Loaded');
    }
}