Öppna ng2bootstrap-modal vid sidladdning i Angular 2 TypeScript

I princip vill jag öppna en Bootstrap-modal med Angular 2 TypeScript så snart sidan har laddats klart.

Från och med nu öppnas modalen vid klick på knappen. Jag försökte med this.smModal.show() som du hittar nedan, men det gav ett fel som följer -

UNDANTAG: Fel: Fångad (i löfte): TypeError: Kan inte läsa egenskapen 'bakgrund' för odefinierad

home.component.ts fil är

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import { Router } from '@angular/router';
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-home'
  templateUrl: 'app/home.component.html',
  directives: [MODAL_DIRECTIVES, CORE_DIRECTIVES],
  viewProviders:[BS_VIEW_PROVIDERS],
  styleUrls: ['app/home.component.css']
})
export class HomeComponent implements OnInit {

  @ViewChild('smModal') public smModal: ModalDirective;

  constructor(private router: Router) { }

  ngOnInit(){
    console.log("Open Modal on init itself.")
    this.smModal.show()
  }

  redirectToOtp(){
    this.router.navigate(['./otp']);
  }

}

Html är som följer

<button type="button" class="btn btn-primary" (click)="smModal.show()">Sign Docs</button>

<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <button type="button" class="close" aria-label="Close" (click)="smModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button> -->
      </div>
      <div class="modal-body">
        <div style="font-size:12px; text-align:center;border-bottom:1px solid #e5e5e5;">
          <div style="color:#696969;">
            <span>Gmail account? Proceed with</span>
          </div>
          <div style="padding-top:10px;">
            <button type="button" class="btn btn-danger" style="background-color:#dd4b39;border-radius:0px;" (click)="redirectToOtp()" (click)="smModal.hide()">Google</button>
          </div>
          <div style="color:#696969;padding-top:10px;padding-bottom:10px;">
            <span>TIP:</span><span style="color:#939393;font-size:10px;">If using multiple Gmail accounts, select the account shown above</span>
          </div>
        </div>
        <div style="padding-top:10px;" class="hidden-xs">
          <div style="text-align:center;">
          </div>

          <div style="color:#939393;font-size:10px; padding-left:45px;padding-right:45px">
          </div>

        </div>
        <div class="" style="padding-top:10px;text-align:center;">
          <button type="button" class="btn btn-primary" style="border-radius:0px;" (click)="redirectToOtp()" (click)="smModal.hide()">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

Svar #1

Försök att flytta onInit-koden till ngAfterViewChecked

Svar #2

onInit-livscykelhaken kontrollerar om den nuvarande komponenten har initialiserats, inte barnen. Vad du behöver här är ngAfterContentInit, som kommer att vänta på att barnen har initialiserats.

Relaterade artiklar