小编Siv*_*vio的帖子

如何在角度为 4 的完美滚动条中启用自动滚动?

文档在这里不是很有帮助。我想在我的应用程序中使用完美的滚动条,这样我就可以绕过与所有浏览器的兼容性问题。我完全按照这里的描述初始化了我的代码https://github.com/zefoy/ngx-perfect-scrollbar/tree/4.xx/。这就是我在我的 html 中所做的

<perfect-scrollbar id="chat" [config]="config"> <li *ngFor="let message of messages"> {{messages}} <li> </perfect-scrollbar>

现在对于每条新消息,我希望容器自动滚动到最新消息。进一步阅读文档,我发现有调用事件的指令。这在我之前链接的文档末尾进行了描述。所以我的方法在同一个组件中如下:

import {PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
...

constructor(private scrollbar:PerfectScrollbarComponent) { }
...

  ngDoCheck() {
    var chat = document.getElementById('chat');
    this.scrollbar.directiveRef.scrollToBottom(chat.scrollHeight);
  }
Run Code Online (Sandbox Code Playgroud)

这给了我一个错误,因为它期望 PerfectScrollbarComponent 是一个提供者。执行此操作后,我收到另一个错误 No provider for ElementRef!。

我为此失眠了。任何人都可以就如何在角度 4 中使用完美滚动条实现自动滚动提出建议吗?先感谢您

perfect-scrollbar angular

10
推荐指数
1
解决办法
5126
查看次数

角度4:从不同的组件调用方法

我有2个兄弟组件,我在一个组件中做一个http请求,如果发生特定情况,它应该发出另一个http请求,写在另一个组件中.所以我应该能够在第一个组件中调用该方法.

这是第一个组成部分:

import { Component, OnInit, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { SendCardComponent } from '../send-card/send-card.component';

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

export class InputFieldComponent implements OnInit {

value = '';
output = '';
@Inject(SendCardComponent) saro: SendCardComponent;

constructor(private http : Http) { }
onEnter(value: string) { 

this.value = value;


this.http.post('http://localhost:5000/APIconversation/', {"val":value})
  .map(response=>response.json())
  .subscribe(
      data => {

            this.output = data.result.fulfillment.speech,
            if(data.result.fulfillment.speech == 'test'){
                saro.sendCard('done', '1' );   
            }               

       });

 } 
Run Code Online (Sandbox Code Playgroud)

我试图从InputFieldComponent调用sendCardComponent中定义的sendCard(),如下所示:

import { Component, …
Run Code Online (Sandbox Code Playgroud)

angular-components angular

6
推荐指数
1
解决办法
3万
查看次数