Используйте функцию класса из вложенного компонента без свойства @Output - PullRequest
Новая
       7

Используйте функцию класса из вложенного компонента без свойства @Output

0 голосов
/ 11 сентября 2018

Кто-нибудь знает, как использовать создание экземпляра класса (а не создавать другой экземпляр) из вложенного компонента внутри этого самого класса?

Чтобы быть более понятным: у меня есть компонент и класс с именем AppBar, который содержит компонент Authenticator, и я хотел бы использовать функцию Appbar внутри Authenticator (что-то вроде возврата значения в AppBar без использования свойства @Output). И хитрость заключается в том, чтобы AppBar оставался только в одном экземпляре, потому что в противном случае я получаю нулевое исключение, поскольку компонент не создается должным образом и не совпадает с тем, который содержит Authenticator. Я надеюсь, что я ясен, иначе я сделаю все возможное, чтобы объяснить это лучше.

Спасибо заранее.

Вот класс 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(){

  }

}

А вот аутентификатор один: 

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;
  }

}

1 Ответ

0 голосов
/ 14 сентября 2018

Этот ответ из комментариев.Гюнтер ответил правильно, но переместил его сюда для других:

Вы должны иметь возможность ввести AppBar в Authenticator, если вы измените видимость AppBar, но правильным подходом, вероятно, будет перемещение этой функции по вашему желанию.вместо этого использовать для службы.

Вам нужно изменить видимость компонента, который вы хотите внедрить.Инжектор знает о родительских компонентах автоматически, если видимость не скрыта.

...