使用没有@Output属性的嵌套组件中的类函数

时间:2018-09-11 09:06:18

标签: dart angular-dart

有人知道如何从该类内部的嵌套组件中使用类的实例化(而不创建另一个实例)吗?

更清楚一点:我有一个名为AppBar的组件和类,其中包含一个组件Authenticator,我想在Authenticator中使用Appbar的函数(有点是不使用@Output属性就将值返回给AppBar)。诀窍是将AppBar保留为仅一个实例,因为否则,由于组件未正确实例化且与包含Authenticator的组件不相同,我将得到null异常。我希望我很清楚,否则我会尽力更好地解释它。

多谢。

这是AppBar类

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';
import 'package:angular_forms/angular_forms.dart';

import '../../utils/init/authenticator.dart';

@Component(
  selector: 'app_bar',
  templateUrl: 'app_bar.html',
  styleUrls: ['package:angular_components/app_layout/layout.scss.css',
    'app_bar.css'
  ],
  directives: [
    Authenticator,
    coreDirectives,
    formDirectives,
  ],providers: [
    ClassProvider(Authenticator),
],
)

class AppBar implements OnInit{

  HtmlElement avatar = querySelector("#avatar");

  @ViewChild('myAuthenticator')
  Authenticator authenticator;

    //This is the function to use from the nested component
  setIcon(String text,String email) {
    avatar.setAttribute("src",text);
    avatar.setAttribute("title",email);


  }

  void ngOnInit(){

  }

}

这是Authenticator之一:

import 'dart:async';
import 'dart:html';

import 'package:angular/angular.dart';
import 'package:googleapis/plus/v1.dart';
import "package:googleapis_auth/auth_browser.dart";

import '../../components/app_bar/app_bar.dart';

@Component(
  selector: 'authenticator',
  templateUrl: 'authenticator.html',
  styleUrls: [],
  directives: [
    AppBar,
    coreDirectives,
  ],
  providers: [
    ClassProvider(AppBar),
  ],
)

class Authenticator implements OnInit{

  Person loggedUser;

  @override
  void ngOnInit(){
    log.info("Initialisation of the Authenticator");
      ...
  }

...
...

  Future<Person> initUser(AutoRefreshingAuthClient client) async {
    Person person = await auth.getPlusUser(client);
    if (person != null) {
      printAccountEmailInfo(person);
      loggedUser = person;
        //This is where the AppBar shouldn't be re-created but use the same as the one from the directives
      AppBar().setIcon(person.image.url,auth.getPlusAccountEmail(person).value);
    }
    return person;
  }

}

0 个答案:

没有答案