Как получить доступ к данным * угловым 2 * компонентам в консоли браузера?

Question

У меня есть DisplayComponent, и я бы хотел увидеть его данные в консоли браузера/разработчика. Как я могу это увидеть?

Пример из Angular2 step by step guide:

function DisplayComponent() { 
    this.myName = "Alice"; 
} 

Как я вижу в консоли браузера/разработчикаthis.myName?

* Обратите внимание, что это вопрос о Угловой 2, а не Угловой 1. suggested solution for AngularJS (Angular 1) не работает.

Answer 1

Неужели вы попробовали простую консольную команду?

console.log(this.myName) 

Надеюсь, что правильно понял ур.

Answer 2

Отъезд this plunker. Поэтому в основном то, что вам нужно сделать в данный момент:

1. Добавить test_lib.js на страницу

2. Добавить ELEMENT_PROBE_BINDINGS ваших приложений привязок.

   import { bootstrap } from 'angular2/angular2' 
   import { ELEMENT_PROBE_BINDINGS} from 'angular2/debug' 
   import { App } from './app' 
   
   bootstrap(App,ELEMENT_PROBE_BINDINGS) 
       .catch(err => console.error(err)); 
   

3. Используйте ng.probe метод, чтобы проверить элемент:

   const app = document.querySelector('my-app'); 
   const debugElement = ng.probe(app); 
   

Answer 3

Для получения более подробной информации см https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications#console