node.js - Angular2错误self.parentView.context ..未定义

Question

我正在尝试使用我的angular 2 webapp，但是在每个页面上都出现此错误：


我没有更改应用程序中的任何内容，并且可以在团队中的人员的计算机上运行。

npm install时是否由这些警告引起？


  npm WARN不推荐使用angular2-google-maps@0.17.0：请使用新的
  包裹名字
  @ agm / core-此处的详细信息：htt：// ... npm WARN首选全球
  node-gyp@3.6.2应该与-g一起安装
  
  
    node-sass@4.5.3安装C：... \ node_modules \ node-sass
    节点脚本/install.js
  
  
  从下载二进制文件
  https://github.com/sass/node-sass/releases/download/v4.5
  .3 / win32-x64-48_binding.node下载完整的二进制文件保存到
  C：... \ node_modules \ node-sass \ vendor \ win32-x64-48 \ bindi
  ng.node将二进制文件缓存到
  C：\ Users \ toto \ AppData \ Roaming \ npm-cache \ node-sass \ 4.5.3 \ win3
  2-x64-48_binding.node
  
  
    tslerp@1.0.5安装后C：... \ node_modules \ tslerp
    打字安装
  
  
  键入WARN特征路径
  缺少“ C：... \ node_modules \ tslerp \ typings.json”
  
  `-（无依赖项）
  
  
    node-sass@4.5.3安装后C：\ Users \ aviale \ Documents \ dev \ workspace \ PlaceDesFa
    milles \ PlaceDesFamilles \ PlaceDesFamillesFront \ node_modules \ node-sass
    节点脚本/ build.js
  
  
  二进制位于
  C：\ Users \ aviale \ Documents \ dev \ workspace \ PlaceDesFamilles \ PlaceDe
  sFamilles \ PlaceDesFamillesFront \ node_modules \ node-sass \ vendor \ win32-x64-48 \ bindi
  ng.node测试二进制Binary很好
  
  
    ng2-google-recaptcha@1.1.0后安装C：... \ node_modules \ ng2-google
    -验证码
    打字安装
  
  
  键入WARN特征路径
  缺少“ C：... \ node_modules \ ng2-google-recaptcha \ typings.json”
  
  `-（无依赖项）
  
  place-des-familles-front@0.0.0
  C：...
  +-@ angular / cli @ 1.0.0-beta.31 | +-@ ngtools / json-schema @ 1.0.3 | +-@ ngtools / webpack @ 1.2.9 | | +-增强型解析@ 3.1.0 | | +-
  loader-utils@0.2.17 | | | +-big.js@3.1.3 | | | +-emojis-list@2.1.0
  | | | -- json5@0.5.1 | |-magic-string@0.19.1 | | -- vlq@0.2.2
| +-- async@2.4.1 | +-- autoprefixer@6.7.7 | | +-- browserslist@1.7.7
| | |-电子对铬@ 1.3.14 | | +-caniuse-db@1.0.30000686
  | | +-normalize-range@0.1.2 | | +-num2fraction@1.2.2 | | +-
  postcss@5.2.17 | | | +-js-base64@2.1.9 | | | --
supports-color@3.2.3 | |-postcss-value-parser@3.3.0 | +-
  粉笔@ 1.1.3 | | +-ansi-styles@2.2.1 | | +-
  escape-string-regexp@1.0.5 | | +-has-ansi@2.0.0 | | | --
ansi-regex@2.1.1 | | +-- strip-ansi@3.0.1 | |-supports-color@2.0.0
  | +-common-tags@1.4.0 | | -- babel-runtime@6.23.0 | |-
  regenerator-runtime@0.10.5 | +-css-loader@0.26.4 | | +-
  loader-utils@1.1.0 | | +-lodash.camelcase@4.3.0 | | +-
  object-assign@4.1.1 | | +-postcss-modules-extract-imports@1.1.0 | |
  | -- postcss@6.0.2 | | |-support-color@3.2.3 | | +-
  postcss-modules-local-by-default@1.2.0 | | | -- postcss@6.0.2 | | |
-support-color@3.2.3 | | +-postcss-modules-scope@1.1.0 | | | --
postcss@6.0.2 | | |-support-color@3.2.3 | | +-
  postcss-modules-values@1.3.0 | | | +-icss-replace-symbols@1.1.0 | |
  | -- postcss@6.0.2 | | |-support-color@3.2.3 | | --
source-list-map@0.1.8 | +-- cssnano@3.10.0 | | +-- decamelize@1.2.0 |
| +-- defined@1.0.0 | | +-- has@1.0.1 | | |-function-bind@1.1.0 |
  | +-postcss-calc@5.3.1 | | | +-postcss-message-helpers@2.0.0 | | |
  -- reduce-css-calc@1.3.0 | | | +-- balanced-match@0.4.2 | | | +--
math-expression-evaluator@1.2.17 | | |-
  reduce-function-call@1.0.2 | | | -- balanced-match@0.4.2 | | +--
postcss-colormin@2.2.2 | | |-colormin@1.1.2 | | | +-
  color@0.11.4 | | | | +-color-convert@1.9.0 | | | | | --
color-name@1.1.2 | | | |-color-string@0.3.0 | | | --
css-color-names@0.0.4 | | +-- postcss-convert-values@2.6.1 | | +--
postcss-discard-comments@2.0.4 | | +--
postcss-discard-duplicates@2.1.0 | | +-- postcss-discard-empty@2.1.0 |
| +-- postcss-discard-overridden@0.1.1 | | +--
postcss-discard-unused@2.2.3 | | |-uniqs@2.0.0 | | +-
  postcss-filter-plugins@2.0.2 | | | -- uniqid@4.1.1 | | |-
  macaddress@0.2.8 | | +-postcss-merge-idents@2.1.7 | | +-
  postcss-merge-longhand@2.0.2 | | +-postcss-merge-rules@2.1.2 | | |
  +-caniuse-api@1.6.1 | | | | +-lodash.memoize@4.1.2 | | | | -- lodash.uniq@4.5.0 | | | +-- postcss-selector-parser@2.2.3 | | | | +--
flatten@1.0.2 | | | | +-- indexes-of@1.0.1 | | | |-uniq@1.0.1 | |
  | -- vendors@1.0.1 | | +-- postcss-minify-font-values@1.0.5 | | +--
postcss-minify-gradients@1.0.5 | | +-- postcss-minify-params@1.2.2 | |
|-alphanum-sort@1.0.2 | | +-postcss-minify-selectors@2.1.1 | |
  +-postcss-normalize-charset@1.1.1 | | +-postcss-normalize-url@3.0.8 | | | +-is-absolute-url@2.1.0 | | | --
normalize-url@1.9.1 | | | +-- prepend-http@1.0.4 | | |-
  query-string@4.3.4 | | | -- strict-uri-encode@1.1.0 | | +--
postcss-ordered-values@2.2.3 | | +-- postcss-reduce-idents@2.4.0 | |
+-- postcss-reduce-initial@1.0.1 | | +-- postcss-reduce-transforms@1.0.4 | | +-- postcss-svgo@2.1.6 | | | +--
is-svg@2.1.0 | | | |-html-comment-regex@1.1.1 | | | -- svgo@0.7.2
| | | +-- coa@1.0.3 | | | |-q@1.5.0 | | | +-csso@2.3.2 | |
  | | -- clap@1.2.0 | | |-whet.extend@0.9.9 | | +-
  postcss-unique-selectors@2.0.2 | | -- postcss-zindex@2.2.0 | +--
debug@2.6.8 | |-ms@2.0.0 | +-denodeify@1.2.1 | +-diff@3.2.0 |
  +-ember-cli-normalize-entity-name@1.0.0 | +-ember-cli-string-utils@1.1.0 | +-extract-text-webpack-plugin@2.1.2 |
  | +-loader-utils@1.1.0 | | +-schema-utils@0.3.0 | | | --
ajv@5.1.5 | |-webpack-sources@1.0.1 | | --
source-list-map@2.0.0 | +-- file-loader@0.10.1 | |-
  loader-utils@1.1.0 | +-findup@0.1.5 | | +-colors@0.6.2 | | --
commander@2.1.0 | +-- fs-extra@2.1.2 | |-jsonfile@2.4.0 | +-
  get-caller-file@1.0.2 | +-glob@7.1.2 | | +-fs.realpath@1.0.0 | |
  +-inflight@1.0.6 | | | -- wrappy@1.0.2 | | +-- inherits@2.0.3 | | +-- once@1.4.0 | |-path-is-absolute@1.0.1 | +-html-webpack-plugin@2.28.0 | | +-html-minifier@3.5.2 | | | +-
  camel-case@3.0.0 | | | | +-no-case@2.3.1 | | | | | --
lower-case@1.1.4 | | | |-大写@ 1.1.3 | | | +-
  clean-css@4.1.4 | | | +-commander@2.9.0 | | | | --
graceful-readlink@1.0.1 | | | +-- he@1.1.1 | | | +-- ncname@1.0.0 | |
| |-xml-char-classes@1.0.0 | | | +-param-case@2.1.1 | | | +-
  relatedurl@0.2.7 | | | -- uglify-js@3.0.16 | | |-commander@2.9.0
  | | +-pretty-error@2.1.0 | | | +-renderkid@2.0.1 | | | | +-
  css-select@1.2.0 | | | | | +-boolbase@1.0.0 | | | | | +-
  css-what@2.1.0 | | | | | +-domutils@1.5.1 | | | | | | --
dom-serializer@0.1.0 | | | | | | +-- domelementtype@1.1.3 | | | | |
|-实体@ 1.1.1 | | | | | -- nth-check@1.0.1 | | | | +--
dom-converter@0.1.4 | | | | |-utila@0.3.3 | | | | +-
  htmlparser2@3.3.0 | | | | | +-domelementtype@1.3.0 | | | | | +-
  domhandler@2.1.0 | | | | | +-domutils@1.1.6 | | | | | --
readable-stream@1.0.34 | | | | | +-- isarray@0.0.1 | | | | |-
  string_decoder@0.10.31 | | | | -- utila@0.3.3 | | |-utila@0.4.0 |
  | -- toposort@1.0.3 | +-- inflection@1.12.0 | +-- inquirer@3.1.0 | |
+-- ansi-escapes@2.0.0 | | +-- cli-cursor@2.1.0 | | |-恢复-
  ...
  未满足的对等关系@ angular / platform-b​​rowser @ 4.2.2 | +-
  @ types / fullcalendar @ 2.7.43 | -- UNMET PEER DEPENDENCY zone.js@^0.8.4
+-- codelyzer@2.0.1 | +-- app-root-path@2.0.1 | +-- css-selector-tokenizer@0.7.0 | | +-- cssesc@0.1.0 | | +--
fastparse@1.1.1 | |-regexpu-core@1.0.0 | | +-再生@ 1.3.2
  | | +-regjsgen@0.2.0 | | -- regjsparser@0.1.5 | |-
  jsesc@0.5.0 | +-cssauron@1.4.0 | +-semver-dsl@1.0.1 | | --
semver@5.3.0 | +-- source-map@0.5.6 |-sprintf-js@1.0.3
  +-核心js@2.4.1
  +-fullcalendar@3.4.0
  +-茉莉花芯@ 2.5.2
  +-jasmine-spec-reporter@2.5.0 | -- colors@1.1.2
+-- jquery@3.2.1
+-- karma@1.2.0 | +-- bluebird@3.5.0 | +-- body-parser@1.17.2 | | +-- bytes@2.4.0 | | +-- content-type@1.0.2 | | +-- debug@2.6.7 | | +--
depd@1.1.0 | | +-- http-errors@1.6.1 | | +-- iconv-lite@0.4.15 | | +--
on-finished@2.3.0 | | |-ee-first@1.1.1 | | +-qs@6.4.0 | | +-
  raw-body@2.2.0 | | | +-字节@ 2.4.0 | | | +-iconv-lite@0.4.15 | | |
  -- unpipe@1.0.0 | |-type-is@1.6.15 | | -- media-typer@0.3.0 |
+-- chokidar@1.7.0 | | +-- anymatch@1.3.0 | | +-- async-each@1.0.1 | | +-- glob-parent@2.0.0 | | +-- is-binary-path@1.0.1 | | |-binary-extensions@1.8.0 | | +-is-glob@2.0.1 | | | --
is-extglob@1.0.0 | |-readdirp@2.1.0 | | --
set-immediate-shim@1.0.1 | +-- combine-lists@1.0.1 | +-- connect@3.6.2
| | +-- debug@2.6.7 | | +-- finalhandler@1.0.3 | | |-debug@2.6.7 |
  | +-parseurl@1.3.1 | | -- utils-merge@1.0.0 | +-- di@0.0.1 | +--
dom-serialize@2.2.1 | | +-- custom-event@1.0.1 | | +-- ent@2.2.0 | |
+-- extend@3.0.1 | |-void-elements@2.0.1 | +-expand-braces@0.1.2 | | +-array-slice@0.2.3 | | +-array-unique@0.2.1 | | --
braces@0.1.5 | |-expand-range@0.1.1 | | +-is-number@0.1.1
  | | -- repeat-string@0.2.2 | +-- graceful-fs@4.1.11 | +--
http-proxy@1.16.2 | | +-- eventemitter3@1.2.0 | |-
  require-port@1.0.0 | +-lodash@3.10.1 | +-log4js@0.6.38 | | +-
  可读流@ 1.0.34 | | | +-core-util-is@1.0.2 | | | +-
  isarray@0.0.1 | | | -- string_decoder@0.10.31 | |-semver@4.3.6 |
  +-mime@1.3.6 | +-optimist@0.6.1 | | +-minimist@0.0.10 | | -- wordwrap@0.0.3 | +-- qjobs@1.1.5 | +-- socket.io@1.4.7 | | +--
debug@2.2.0 | | |-ms@0.7.1 | | +-engine.io@1.6.10 | | | +-
  accepts@1.1.4 | | | | +-mime-types@2.0.14 | | | | | --
mime-db@1.12.0 | | | |-negotiator@0.4.9 | | | +-base64id@0.1.0 |
  | | +-debug@2.2.0 | | | | -- ms@0.7.1 | | | +--
engine.io-parser@1.2.4 | | | | +-- after@0.8.1 | | | | +--
arraybuffer.slice@0.0.6 | | | | +-- base64-arraybuffer@0.1.2 | | | |
+-- blob@0.0.4 | | | | +-- has-binary@0.1.6 | | | | |-isarray@0.0.1 | | | | -- utf8@2.1.0 | | |-ws@1.0.1 | | | +-
  options@0.0.6 | | | -- ultron@1.0.2 | | +-- has-binary@0.1.7 | | |
-isarray@0.0.1 | | +-socket.io-adapter@0.4.0 | | | +-
  debug@2.2.0 | | | | -- ms@0.7.1 | | |-socket.io-parser@2.2.2 | |
  | +-debug@0.7.4 | | | +-isarray@0.0.1 | | | -- json3@3.2.6
| | +-- socket.io-client@1.4.6 | | | +-- backo2@1.0.2 | | | +--
component-bind@1.0.0 | | | +-- component-emitter@1.2.0 | | | +--
debug@2.2.0 | | | |-ms@0.7.1 | | | +-engine.io-client@1.6.9 | |
  | | +-component-inherit@0.0.3 | | | | +-debug@2.2.0 | | | | | --
ms@0.7.1 | | | | +-- has-cors@1.1.0 | | | | +-- parsejson@0.0.1 | | |
| +-- parseqs@0.0.2 | | | | +-- xmlhttprequest-ssl@1.5.1 | | | |-
  酵母@ 0.1.2 | | | +-indexof@0.0.1 | | | +-object-component@0.0.3 |
  | | +-parseuri@0.0.4 | | | | -- better-assert@1.0.2 | | | |-
  callsite@1.0.0 | | | -- to-array@0.1.4 | |-socket.io-parser@2.2.6
  | | +-基准@ 1.0.0 | | +-component-emitter@1.1.2 | | +-
  debug@2.2.0 | | | -- ms@0.7.1 | |-isarray@0.0.1 | +-
  tmp@0.0.28 | -- useragent@2.1.13 | +-- lru-cache@2.2.4 |-
  tmp@0.0.31
  webdriver@2.53.42 | +-阻止代理@ 0.0.5 | +-
  jasmine@2.6.0 | | +-exit@0.1.2 | | -- jasmine-core@2.6.3 | +--
jasminewd2@2.1.0 | +-- q@1.4.1 | +-- saucelabs@1.3.0 | |-
  https-proxy-agent@1.0.0 | | -- agent-base@2.1.1 | +--
selenium-webdriver@3.0.1 | |-tmp@0.0.30 | +-
  source-map-support@0.4.15 | +-webdriver-js-extender@1.0.0 | | --
selenium-webdriver@2.53.3 | | +-- adm-zip@0.4.4 | | +-- tmp@0.0.24
| |-xml2js@0.4.4 | | -- sax@0.6.1 |-
  webdriver-manager@12.0.6 | +-adm-zip@0.4.7 | +-del@2.2.2 | |
  +-globby@5.0.0 | | | -- array-union@1.0.2 | | +-- is-path-cwd@1.0.0 | | +-- is-path-in-cwd@1.0.0 | | |-
  is-path-inside@1.0.0 | | | -- path-is-inside@1.0.2 | |-
  pify@2.3.0 | +-ini@1.3.4 | +-semver@5.3.0 | --
xml2js@0.4.17 | +-- sax@1.2.2 |-xmlbuilder@4.2.1
  +-rxjs@5.4.1 | -- symbol-observable@1.0.4
+-- ts-helpers@1.1.2
+-- ts-node@1.2.1 | +-- arrify@1.0.1 | +-- diff@2.2.3 | +-- make-error@1.3.0 | +-- mkdirp@0.5.1 | |-minimist@0.0.8 | +-
  pinkie@2.0.4 | +-tsconfig@5.0.3 | | +-任何承诺@ 1.3.0 | | +-
  parse-json@2.2.0 | | | -- error-ex@1.3.1 | | |-
  is-arrayish@0.2.1 | | +-strip-bom@2.0.0 | | | -- is-utf8@0.2.1 | |
-strip-json-comments@2.0.1 | -- xtend@4.0.1
+-- tslint@4.5.1 | +-- babel-code-frame@6.22.0 | | +-- esutils@2.0.2 | |-js-tokens@3.0.1 | +-findup-sync@0.3.0 | | -- glob@5.0.15 |
+-- tsutils@1.9.1 |-update-notifier@2.2.0 | +-boxen@1.1.0 | | +-ansi-align@2.0.0 | | +-camelcase@4.1.0 | | +-
  cli-boxes@1.0.0 | | +-字符串宽度@ 2.0.0 | | | --
is-fullwidth-code-point@2.0.0 | | +-- term-size@0.1.1 | | |-
  execa@0.4.0 | | | +-cross-spawn-async@2.2.5 | | | +-
  is-stream@1.1.0 | | | +-npm-run-path@1.0.0 | | | +-
  path-key@1.0.0 | | | -- strip-eof@1.0.0 | |-
  最广线@ 1.0.0 | +-configstore@3.1.0 | | +-dot-prop@4.1.1 |
  | | -- is-obj@1.0.1 | | +-- make-dir@1.0.0 | | +--
unique-string@1.0.0 | | |-crypto-random-string@1.0.0 | | --
write-file-atomic@2.1.0 | | +-- imurmurhash@0.1.4 | |-
  slide@1.1.6 | +-import-lazy@2.1.0 | +-is-npm@1.0.0 | +-
  最新版本@ 3.1.0 | | -- package-json@4.0.1 | | +--
got@6.7.1 | | | +-- create-error-class@3.0.2 | | | |-
  capture-stack-trace@1.0.0 | | | +-双工器3@0.1.4 | | | +-
  get-stream@3.0.0 | | | +-is-redirect@1.0.0 | | | +-
  is-retry-allowed@1.1.0 | | | +-小写字母@ 1.0.0 | | |
  +-超时@ 4.0.1 | | | +-解压缩响应@ 2.0.1 | | | -- url-parse-lax@1.0.0 | | +-- registry-auth-token@3.3.1 | | +--
registry-url@3.1.0 | |-semver@5.3.0 | +-semver-diff@2.1.0
  | | -- semver@5.0.3 |-xdg-basedir@3.0.0
  +-打字稿@ 2.0.10
  +-打字@ 2.1.0 | +-archy@1.0.0 | +-cli-truncate@0.2.1 | | +-slice-ansi@0.0.4 | | `-string-width@1.0.2 | | +-
  
  exit-hook@1.1.1 | | -- onetime@1.1.0 | +-- promise-finally@3.0.0
| +-- typings-core@2.3.3 | | +-- array-uniq@1.0.3 | | +--
detect-indent@5.0.0 | | +-- invariant@2.2.2 | | |-
  散落环境@ 1.3.1 | | +-is-absolute@0.2.6 | | | +-
  is-relative@0.2.1 | | | | -- is-unc-path@0.1.2 | | | |-
  unc-path-regex@0.1.2 | | | -- is-windows@0.2.0 | | +--
jspm-config@0.3.4 | | +-- lockfile@1.0.3 | | +--
make-error-cause@1.2.2 | | +-- object.pick@1.2.0 | | |-
  isobject@2.1.0 | | +-popsicle@9.1.0 | | | +-concat-stream@1.6.0 |
  | | | -- typedarray@0.0.6 | | |-form-data@2.2.0 | | +-
  popsicle-proxy-agent@3.0.0 | | | -- http-proxy-agent@1.0.0 | | +--
popsicle-retry@3.2.1 | | +-- popsicle-rewrite@1.0.0 | | +--
popsicle-status@2.0.1 | | +-- rc@1.2.1 | | |-deep-extend@0.4.2 | |
  +-sort-keys@1.1.2 | | | -- is-plain-obj@1.1.0 | | +-- string-template@1.0.0 | | +-- strip-bom@3.0.0 | | +-- thenify@3.3.0 |
| +-- throat@3.2.0 | | +-- touch@1.0.0 | | |-nopt@1.0.10 | | --
zip-object@0.1.0 | +-- update-notifier@1.0.3 | | +-- boxen@0.6.0 | | |
+-- ansi-align@1.1.0 | | | +-- camelcase@2.1.1 | | | +-- filled-array@1.1.0 | | |-重复@ 2.0.1 | | | --
is-finite@1.0.2 | | +-- configstore@2.1.0 | | | +-- dot-prop@3.0.0 | |
|-write-file-atomic@1.3.4 | | +-最新版本@ 2.0.0 | | | --
package-json@2.4.0 | | | +-- got@5.7.1 | | | | +-- duplexer2@0.1.4
| | | | +-- node-status-codes@1.0.0 | | | | +--
read-all-stream@3.1.0 | | | | +-- timed-out@3.1.3 | | | |-
  解压缩响应@ 1.0.2 | | | -- semver@5.3.0 | | +-- lazy-req@1.1.0 |
|-xdg-basedir@2.0.0 | -- wordwrap@1.0.0-zone.js@0.7.8
  
  npm警告可选的跳过选择性依赖：fsevents@^1.0.0
  （node_modules \ ch
  okidar \ node_modules \ fsevents）：npm警告notsup跳过可选
  依赖：fsevents @不受支持的平台
  1.1.2：通缉{“ os”：“ darwin”，“ arch”：“ any”}（当前：{“ os”：“ win32”，“ arch”：“ x64”}
  ）npm WARN @ angular / forms @ 4.2.2需要一个
  @ angular / platform-b​​rowser @ 4.2.2
  但没有安装。 npm WARN @ angular / core @ 4.2.2需要一个对等体
  of zone.js@^0.8.4，但没有一个是inst
  好好


这是我的app.component.ts：

import { Component, ViewContainerRef } from '@angular/core';
import { Router } from '@angular/router';
import { Modal, Overlay } from 'angular2-modal';
import { Utilisateur } from './shared/utilisateur';
import { PanierService } from './panier.service';
import { ParentService } from './parent.service';
import { ConfirmDialogModule, ConfirmationService } from 'primeng/primeng';
import { PanierNumber } from './shared/panier';


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

})
export class AppComponent {
  userRole: string;
  displayLogin: boolean = false;
  displayRegister: boolean = false;
  open: any = -1;
  year: number;
  nrPanier: number;

  constructor( private utilisateur: Utilisateur, private router: Router, private modal: Modal, overlay: Overlay, viewContainer: ViewContainerRef,
               private confirmationService: ConfirmationService, private panierService: PanierService, private parentService: ParentService, private panierNumber: PanierNumber) {
                this.nrPanier = 0;
                this.year = new Date().getFullYear();
                overlay.defaultViewContainer = viewContainer;
                this.utilisateur.mySubject.subscribe(
                    value => {
                        this.userRole = value;
                        this.displayLogin = false;
                    }
                  );
                  if(localStorage.getItem("currentUserPDF")){
                    this.utilisateur.role = JSON.parse(localStorage.getItem("currentUserPDF")).role;
                    if(JSON.parse(localStorage.getItem("currentUserPDF")).role == "PARENT"){
                      this.parentService.getParent(JSON.parse(localStorage.getItem("currentUserPDF")).id).subscribe(r => {
                          r.enfants.forEach(e => {
                              this.panierService.getPanier(JSON.parse(localStorage.getItem("currentUserPDF")).id, e.id).subscribe(r => {
                                  r.forEach(h => {
                                      this.nrPanier++;
                                  });
                                  this.panierNumber.setNumber(this.nrPanier);
                              });
                          });

                      });

                      this.panierNumber.numberPanier$.subscribe(nr => {
                        this.nrPanier = nr;
                      });
                    }
                  }

  }
  checkToken() {
      if(localStorage.getItem("accessToken")) {
        return true;
      }
      return false;
  }
  confirmLogout() {
      this.confirmationService.confirm({
          message: 'Êtes-vous sûr de vouloir vous déconnecter ?',
          header: "Déconnexion",
          accept: () => {
             localStorage.removeItem('currentUserPDF');
             localStorage.removeItem("accessToken");
             this.router.navigate(['']);
            }
      });
  }
  openLoginModal() {
        this.displayLogin = true;
  }
  openRegisterModal() {
        this.displayRegister = true;
  }
  toggle() {
    this.open = this.open*-1;
  }
  isOpen() {
    if(this.open>0) {
      return true;
    } else {
        return false;
    }
  }
  goToPanier(){
    this.router.navigate(['/panier']);
  }
}

这是我的 package.json：

{
  "name": "place-des-familles-front",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@types/fullcalendar": "^2.7.42",
    "@types/jquery": "^2.0.44",
    "angular2-google-maps": "^0.17.0",
    "angular2-modal": "^2.0.3",
    "ap-angular2-fullcalendar": "^1.2.8",
    "core-js": "^2.4.1",
    "fullcalendar": "^3.4.0",
    "jquery": "^3.2.1",
    "moment": "^2.18.1",
    "ng2-google-recaptcha": "1.1.0",
    "primeng": "^2.0.6",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "typings": "2.1.0",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.31",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.43",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "^1.0.2",
    "protractor": "~5.1.0",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.0"
  }
}

这是我的 app.component.html：

<nav>
    <a routerLink=''><img src="./assets/img/logo.png" height="66"></a>
    <button class="collapse" type="button" pButton (click)="toggle()" icon="fa-bars"></button>
    <div class="nav1">
        <div *ngIf="!checkToken()">
            <div class="navbar-div" ><a class="navbar-a" routerLink='./rechercher_creche'> recherche </a></div>
            <div class="navbar-div" ><a class="navbar-a" routerLink='./register'> inscription </a></div>
            <div class="navbar-div"><a class="navbar-a" (click)="openLoginModal()"> connexion </a></div>
        </div>
        <div *ngIf="checkToken()">
            <div class="navbar-div" *ngIf="checkToken() && utilisateur.role.toLowerCase()=='parent'" (click)="goToPanier()" style="cursor: pointer;">
                <img src="./assets/img/panier.jpg" style="width: 20px; float: right"/>
                <span style="float: right; color: #428bca;">{{nrPanier}}</span>
            </div>
            <div class="navbar-div" ><a class="navbar-a" (click)="confirmLogout()"> déconnexion </a></div>
            <div class="navbar-div" *ngIf="utilisateur.role.toLowerCase()=='parent'"><a class="navbar-a" routerLink='compte_famille'> mon compte </a></div>
            <div class="navbar-div" *ngIf="utilisateur.role.toLowerCase()!='parent'"><a class="navbar-a" routerLink='etablissement'> professionnels </a></div>
        </div>

    </div>
    <div class="nav2" [ngClass]="{'in': isOpen()}">
        <div *ngIf="!checkToken()">
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" (click)="openLoginModal()"> connexion </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='./register'> inscription </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='./rechercher_creche'> recherche </a></div>
        </div>
        <div *ngIf="checkToken()"> 
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" routerLink='compte_famille'> mon compte </a></div>
            <div class="navbar-div"  (click)="toggle()"><a class="navbar-a" (click)="confirmLogout()"> déconnexion </a></div>
            <div class="navbar-div" *ngIf="checkToken() && utilisateur.role.toLowerCase()=='parent'" (click)="goToPanier()" style="cursor: pointer;">
                <img src="./assets/img/panier.jpg" style="width: 20px; float: right"/>
                <span style="float: right; color: #428bca;">{{nrPanier}}</span>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <router-outlet></router-outlet>
</div>


<p-dialog header="Connexion" [(visible)]="displayLogin" [dismissableMask]="true" modal="modal" responsive="true" styleClass="crecheTab">
    <login></login>
</p-dialog>

<p-confirmDialog icon="fa fa-question-circle" #cd responsive="true">
    <p-footer>
        <button type="button" pButton icon="fa-close"label="Non" (click)="cd.reject()" style="background-color:#3887C9;font-family: raleway;"></button>
        <button type="button" pButton icon="fa-check" label="Oui" (click)="cd.accept()" style="background-color:#3887C9;font-family: raleway;"></button>
    </p-footer>
</p-confirmDialog>

<footer>
    <div class="foot1 ui-g">
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST PRATIQUE </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink=''> Foire aux questions </a></li>
                        <li> <a class='footer-a' routerLink=''> Professionnels petite enfance </a></li>
                        <li> <a class='footer-a' routerLink=''> Application mobile </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST NOUS ! </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink='./qui_sommes_nous'> Qui nous sommes ? </a></li>
                        <li> <a class='footer-a' routerLink=''> Nos partenaires </a></li>
                        <li> <a class='footer-a' routerLink=''> Nous recrutons </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
        <table class='footer-table ui-g-10 ui-md-4 ui-lg-3'>
            <tr>
                <th class='footer-th'> C'EST LÉGAL </th>
            </tr>
            <tr>
                <td>
                    <ul class='footer-ul'>
                        <li> <a class='footer-a' routerLink='./cgu'> Conditions générales d'utilisation </a></li>
                        <li> <a class='footer-a' routerLink='./mentions_legales'> Notice légale </a></li>
                    </ul> 
                </td>
            </tr>
        </table>
    </div>

    <div class="foot2">
        Place des Familles - {{year}} <i class="fa fa-registered" aria-hidden="true"></i>
    </div>
</footer>

编辑：
在我的类“ utilisateur”中，我为角色定义了一个默认值，因此它不应为undefined：

@Injectable()
export class Utilisateur {
    public id: number;
    public prenom: string;
    public nom: string;
    public login: string;
    public role: string = 'guest';
    public codePostal: string;
    public ville: string;
    public accessToken: string;
    public civilite: string;
    public mySubject: BehaviorSubject<string> = new BehaviorSubject<string>(this.role);
    public changeRole(): void {
        this.mySubject.next(this.role);
    }
}

询问我更多信息。

Answer 1

如错误所示，在执行utilisateur.role时未定义*ngIf，因此utilisateur.role.lowerCase()会引发错误。您可以执行以下解决方法：

*ngIf="utilisateur.role && utilisateur.role.toLowerCase()=='parent'">

这将首先检查 utilisateur.role，如果它是 undefined，它将被评估为false。