如何在路由器出口外传递数据?角度4

时间:2018-08-03 15:00:58

标签: angular components

我已经制作了两个组件,AppComponent和WelcomeComponent。

应用组件html具有以下结构:

<!-- header code divs and navs -->
<router-oulet> </router-oulet>
<app-welcome (valueChange)='displayCounter($event)'></app-welcome>
<!-- header code divs and navs -->

欢迎组件html具有以下内容:

<div class="row center">
      <a (click)="loginFb()" id="download-button" class="btn-large waves-effect waves-light orange">Registrarte</a>  
      </div>

这就是我在“欢迎组件”中正在做的事情:

export class WelcomeComponent implements OnInit {
  error: any;
  autorized: boolean;

  @Output() valueChange: EventEmitter <boolean>;

  constructor(public af: AngularFireAuth, public router: Router) {

  }

  ngOnInit() {
    this.autorized = false;
  }

  loginFb() {
    console.log("holaa wey")
    this.valueChange.emit(this.autorized);
  }

AppComponent具有此代码

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

export class AppComponent {
  title = 'app';

    error: any;

  @Input() public autorized: boolean;

  constructor(public af: AngularFireAuth, public router: Router) {
     this.autorized=true;
  }

  signOut(): void {
    this.af.auth.signOut();
    this.router.navigate(['/'])
  }

    displayCounter(count) {
      console.log("paso por sadsdf")
      console.log(count);
      this.autorized=count;
    }

所以实际上输出是:

"paso por sadsdf"
"holaa wey"

唯一的问题是html复制如下所示的WelcomeComponent:

imgur.com/a/wsdyyPt

如何在没有选择器</app-welcome>的情况下使此代码正常工作?

(valueChange)='displayCounter($event)

0 个答案:

没有答案