使用输入和输出在组件之间传递数据

时间:2016-08-03 22:07:09

标签: angular

所以我是第二角的新手,我看了几个教程,试图找出如何做到这一点,我无法让它工作。你能告诉我这里我做错了什么吗?

所以我试图将布尔值从一个组件传递到另一个组件,这将触发带有ng-class的动画。该事件发生在子组件中。我需要父母回复。

子组件:

export class DefaultRouteViewComponent implements OnInit {
  @Input() compare: boolean = false;
  @Output() compareEvent = new EventEmitter();

  constructor(public _menu: MenuService) {}

  toggleCompare () {
    this.compare = !this.compare;
    this.compareEvent.emit({
       value: this.compare
    })
  }

父组件:

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: '<div class="app-wrapper" [ngClass]="{'hide-app' : hideApp}" (hideApp)="hideAppChange($event);" (compareEvent)="hideAppChange($event)"></div>',
  directives: NgClass, DefaultRouteViewComponent],
})
export class AppComponent implements OnInit {
  hideApp: Boolean;

  constructor() {}

  hideAppChange(event) {
     console.log(event);
  }
}

我觉得问题出在父组件模板中。我不确定。请帮忙!谢谢。

2 个答案:

答案 0 :(得分:1)

'compareEvent'事件绑定需要作为父组件html中子组件的选择器的属性放置。

因此,在父组件模板html中,您需要以下内容:

    public class SetPublishDate
    {
    /// <summary>
    /// Gets from date.
    /// </summary>
    /// <value>From date.</value>
    public DateTime FromDate { get; set; }

    /// <summary>
    /// Gets to date.
    /// </summary>
    /// <value>To date.</value>
    public DateTime ToDate { get; set; }

    public void UpdatePublishingDate(object sender, EventArgs args)
    {
        var arguments = args as Sitecore.Publishing.Pipelines.PublishItem.ItemProcessingEventArgs;
        var db = Sitecore.Configuration.Factory.GetDatabase("master");
        Item item = db.GetItem(arguments.Context.ItemId);
        if (item != null)
        {
            using (new Sitecore.Data.Events.EventDisabler())
            {
                using (new EditContext(item))
                {
                    //PublishDateFieldName must be datetime field
                    item["PublishDateFieldName"] = DateTime.Now;
                }
            }
        }
    }

希望有所帮助!

答案 1 :(得分:0)

可能重复Passing @Input and subscribing to @Output while navigating to a Route in Angular 2 Component

如果您需要在父路由组件和子路由组件之间进行通信,则可以使用Bi Directional service

您可能会看到类似的implementation here

希望这会有所帮助!!