Question

在我的instagram.component.html文件中，将boxPosition ID分配给我的div。然后我在另一个名为sidenav.component.ts的组件中使用它。 sidenav组件先运行，然后单击该组件中的一个图标，然后执行instagram.component。

问题出在这里，首先在执行instagram组件之前，我使用boxPosition元素更改了该元素的右边距，但是boxPosition为null，我看到了错误。

这是我的instagram.component.html：

<div class="content-container d-rtl">

  <div class="main-rectangular d-rtl" id="boxPosition">

  </div>

</div>

这是我的instagram.component.ts：

export class InstagramComponent implements OnInit {

  @Output('boxPosition') public boxPosition: ElementRef;

  constructor(public appGlobal: AppGlobals) {
  }

  ngOnInit() {
  }
}

这是我的sidnavbar.component.html：

<a class="icon-calendar"
   (click)="subSideNav('content-production')"
   routerLinkActive="active" routerLink="./content/production"
   ></a>

这是我的sidnavbar.component.ts：

subSideNav(id) {
    const navProperty = document.getElementById('subTitleSideNav');
    const navWidth = window.getComputedStyle(navProperty, null).getPropertyValue('width');
    const boxProperty = document.getElementById('boxPosition');


    if (navWidth === '0px') {
      // Open sidenavbar
      document.getElementById('subTitleSideNav').style.width = '140px';
      this.titleID = id;
      console.log(boxProperty);
      document.getElementById('boxPosition').style.marginRight = '240px';

    }
}

box属性为null，因此document.getElementById('boxPosition').style.marginRight不起作用。

我该如何解决此问题？

Answer 1

更新了instagram.component.ts：

        int port = 587;
        string host = "smtp.office365.com";
        string username = "smtp.out@mail.com";
        string password = "password";
        string mailFrom = "noreply@mail.com";
        string mailTo = "mailto@mail.com";
        string mailTitle = "Testtitle";
        string mailMessage = "Testmessage";

        var message = new MimeMessage();
        message.From.Add(new MailboxAddress(mailFrom));
        message.To.Add(new MailboxAddress(mailTo));
        message.Subject = mailTitle;
        message.Body = new TextPart("plain") { Text = mailMessage };

        using (var client = new SmtpClient())
        {
            client.Connect(host , port, SecureSocketOptions.StartTls);
            client.Authenticate(username, password);

            client.Send(message);
            client.Disconnect(true);
        }

更新了sidnavbar.component.ts：

export class InstagramComponent implements OnInit, 
 AfterViewInit{ 
  @Output('boxPosition') public   boxPosition: ElementRef;   
   constructor(public appGlobal:   AppGlobals) { } 
  ngOnInit() { } 
  ngAfterViewInit(){ 
      document.getElementById('boxPosition').
       style.marginRight = '240px';
  }
}

如何在完全呈现html之前更改元素的样式？

1 个答案: